Toni Järvinen - Design Tutorials
Toni Järvinen - Design Tutorials
  • Видео 36
  • Просмотров 248 854
Build a Stunning Design Portfolio in 30 Minutes | No-code + Free Template
Get started with Lume Template: www.framer.com/marketplace/templates/lume/
Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/
In this tutorial, I’ll guide you step-by-step to create a fully responsive portfolio website using my free Framer template, Lume. Whether you’re a UX/UI designer, a creative professional, or someone building your personal brand, this video is for you!
What You’ll Learn:
How to customize your homepage
Showcase your case studies
Design a professional contact form
Style navigation & footer
Update colors, fonts, and overall styles
Publish your site (in minutes!)
This template is designed to help you stand out as a designer, impress clients and recruit...
Просмотров: 732

Видео

Create Interactive Card Slideshow in Framer | No-Code Tutorial for Beginners
Просмотров 1,6 тыс.Месяц назад
Live demo: cardslideshow.framer.website/ Remix this project: framer.com/projects/new?duplicate=yPcpxXJqkyDUUqE15IuI&via=tonjrv Get the My Framer templates: www.framer.com/marketplace/creator/toni-jarvinen/ In this video, we'll guide you through the process of how to create interactive card slideshow that can make your website stand out from the rest. Whether you're a beginner or an experienced ...
Top 10 Widgets to Embed on Your Website | Framer Tutorial
Просмотров 3,5 тыс.4 месяца назад
Get started with Framer: www.framer.com/?via=tonjrv Download my Free Framer Templates: tonjrv.lemonsqueezy.com/ Discover the best widgets to enhance your website's functionality and user experience! In this video, we'll explore the top 10 widgets to embed on your website. From social media feeds to interactive maps, these tools will help you engage your visitors, streamline operations, and boos...
Custom Video Player in Framer (No-code tutorial)
Просмотров 3 тыс.5 месяцев назад
Live demo: videocomponent.framer.website/ Remix this project: framer.com/projects/new?duplicate=nvHuC84wtejvEVGbGUMe&via=tonjrv In this video, we'll guide you through the process of how to create custom video player in Framer. You can use the video player to match with your unique site style. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a to...
Stacked Cards Effect in Framer (No-code tutorial)
Просмотров 4,5 тыс.6 месяцев назад
Live demo: stackedcards.framer.website/ Remix this project: framer.com/projects/new?duplicate=1uQdnzKCZHFiHwAw4LRP&via=tonjrv Get the Stacky Template for FREE: stacky.framer.website/ In this video, we'll guide you through the process of how to create stacked cards effect in Framer when you are scrolling the page. Whether you're a beginner or an experienced designer, this step-by-step tutorial w...
Show & Hide Navigation bar on Scroll - Framer no-code tutorial
Просмотров 8 тыс.7 месяцев назад
Create your free Framer account: www.framer.com/?via=tonjrv Get the Appverse template for free: tonjrv.lemonsqueezy.com/ In this video, we'll guide you through the process how you can show and hide navigation bar on scroll. Making your website interactiveengaging. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your ...
Interactive Navigation Menu in Framer (No-code tutorial)
Просмотров 26 тыс.7 месяцев назад
Live demo: interactivenavigation.framer.website/ Remix this project: framer.com/projects/new?duplicate=osR2BQpWVnOmZAG9Sf3D&via=tonjrv Get the Appverse template for free: tonjrv.lemonsqueezy.com/ In this video, we'll guide you through the process of how to create interactive navigation menu that is interactive and updates based on the scroll sections. Whether you're a beginner or an experienced...
Fixed Side Navigation Bar in Framer | Step-by-Step No-code Tutorial
Просмотров 3,8 тыс.7 месяцев назад
Live demo: fixednavigation.framer.website/ Remix this for free: framer.com/projects/new?duplicate=jyqT4bShSCnNXZy7DSTP&via=tonjrv In this video, we'll guide you through the process of how to create a fixed side navigation bar in Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters: 00:00 Pre...
Circular Progress Bar Animation | Figma for Beginners (Part 2 - Timer in Figma)
Просмотров 5 тыс.8 месяцев назад
See the first tutorial on counting timer: ruclips.net/video/w3Z3rQD2qQk/видео.html In this video, you'll learn how to create a circular progress bar animation in Figma. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your prototypes. Chapters: 00:00 Preview 00:38 Circular Animation Basics 01:30 Creating Animation 04:...
Interactive Pricing Section - Framer No-Code Tutorial
Просмотров 2,4 тыс.8 месяцев назад
Live demo: interactivepricing.framer.website/ Remix this project: framer.com/projects/new?duplicate=KmkoeKkLsPvyzJ9oQWA1&via=tonjrv In this video, we'll guide you through the process of how to create interactive pricing section using Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters: 00:0...
Text Animation & Scroll Animation - Framer for Beginners | No-code Tutorial
Просмотров 13 тыс.9 месяцев назад
Live demo: textanimation.framer.website/ Remix this project: framer.com/projects/new?duplicate=GHMfqhxxzPPhcD3zb1Ev&via=tonjrv In this video, we'll guide you through the process of how to create text animations and scroll animations using Framer. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a touch of interactivity to your website. Chapters:...
Best Figma Plugin for Landing Page Animation - Figma & Framer Tutorial (No-code)
Просмотров 5 тыс.10 месяцев назад
Best Figma Plugin for Landing Page Animation - Figma & Framer Tutorial (No-code)
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Просмотров 4,6 тыс.10 месяцев назад
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Best Design Tools To Learn in 2024
Просмотров 2,8 тыс.10 месяцев назад
Best Design Tools To Learn in 2024
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Просмотров 14 тыс.11 месяцев назад
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Просмотров 3,9 тыс.11 месяцев назад
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Просмотров 23 тыс.11 месяцев назад
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Просмотров 6 тыс.Год назад
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Просмотров 7 тыс.Год назад
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Просмотров 1,8 тыс.Год назад
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Просмотров 42 тыс.Год назад
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Просмотров 4 тыс.Год назад
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Learn Figma: Animated Border in Figma for Beginners
Просмотров 5 тыс.Год назад
Learn Figma: Animated Border in Figma for Beginners
Framer tutorial: Animated Border in 2 minutes (No-code)
Просмотров 10 тыс.Год назад
Framer tutorial: Animated Border in 2 minutes (No-code)
Creating an Interactive Menu Button in Framer | Step-by-Step No-code Tutorial
Просмотров 11 тыс.Год назад
Creating an Interactive Menu Button in Framer | Step-by-Step No-code Tutorial
Learn Figma: How to do timer animation in Figma for beginners
Просмотров 31 тыс.Год назад
Learn Figma: How to do timer animation in Figma for beginners

Комментарии

  • @fantazero4618
    @fantazero4618 17 часов назад

    is there a way of making it responsive? i´ve been trying but i havent been lucky, thanks for the content!! i have learned lots from u

  • @aartibandekar9520
    @aartibandekar9520 День назад

    Loved the tutorial! How can I make this component responsive though? The moment I add layout properties the design breaks :(

  • @ChelseyMorphy
    @ChelseyMorphy 2 дня назад

    Great video! Loved setting it up. Any chance this could be done with the option to expand and compress the side bar? If so, how would that work with the padding to enlarge when the side navigation is compressed?

  • @sudeeprao619
    @sudeeprao619 4 дня назад

    Super useful tutorial. Straightforward and to the point! Thanks a lot.

  • @asoume24
    @asoume24 7 дней назад

    Thank you

  • @paweenaha4120
    @paweenaha4120 8 дней назад

    Thank you so much!!

    • @tonjrv
      @tonjrv 7 дней назад

      No worries at all! 🙌

  • @aryan2405
    @aryan2405 8 дней назад

    Hi bro! Can you help me with this issue - *I need the pricing to be a one time payment [Not a monthly subscription plan] for my course. Is there any way to change the pricing section as such?* Please help me bro! Any documentation or even a reply would be very helpful ✨✨

    • @tonjrv
      @tonjrv 8 дней назад

      Hi mate! Would it work if you'd just change the copy to indicate clearly that the pricing would be one time payment? E.g. Pay once: $99 - Access the course forever with one-time payment.

    • @aryan2405
      @aryan2405 8 дней назад

      @tonjrv ohh I'm so dumb... It did work bro! Thanks alot 🙌🏻😭

  • @tahysribau9479
    @tahysribau9479 9 дней назад

    why white rectangles appear on top of my cards after I Aadded the animation ?

    • @tonjrv
      @tonjrv 8 дней назад

      Good question! If you want you can send me a screen recording or link to your site on Twitter/Instagram, and I can try to help you 🙌

  • @vedenskii
    @vedenskii 11 дней назад

    Hey from Finland! thanks for the video! Can you please share a link to the program that you use to make such a cool screen recording? The cursor zoom is very cool looking.

    • @tonjrv
      @tonjrv 8 дней назад

      Moikka! And no worries at all, the screen recording tool is called Screen Studio, you can check it out here: screenstudio.lemonsqueezy.com?aff=zXV1p (I love it)

  • @Charlie-le4sp
    @Charlie-le4sp 11 дней назад

    Thanks Tony, you have helped me a lot. I appreciate the quality of the content you create. You explain things very well, even though I don't speak much English 😂, but you do it in a relaxed and unhurried way...thank you so much 🙏👋👋

    • @tonjrv
      @tonjrv 8 дней назад

      Awesome to hear that mate! 🔥 Let me know if you ever face any issues and I'm happy to help

  • @gorkemorg
    @gorkemorg 12 дней назад

    Thanks a lot

    • @tonjrv
      @tonjrv 8 дней назад

      No worries, happy to help! 🔥

  • @JordanMattKim
    @JordanMattKim 17 дней назад

    what if I wanna make this gradient thing corresponding to page scroll? kinda like serving as a reminder of how long this article is. Thanks!

    • @tonjrv
      @tonjrv 8 дней назад

      Good question, I'm not sure if you can apply this directly to it. But here's at least one resource that could help you out: framer.university/resources/scroll-progress-bar-override

  • @vago9308
    @vago9308 17 дней назад

    Thank you, sir!

    • @tonjrv
      @tonjrv 8 дней назад

      No worries at all mate! 🔥

  • @rdesignerr
    @rdesignerr 17 дней назад

    After a long time bro. Where you were? I missed you a lot :(

    • @tonjrv
      @tonjrv 8 дней назад

      Thanks bro! I've been busy with all the other projects, but I'll try my best to be more active here 🔥

  • @ChiSportsCollective
    @ChiSportsCollective 18 дней назад

    Can you make a tutorial on how to make this responsive for mobile?

    • @tonjrv
      @tonjrv 8 дней назад

      Great idea! i'll put that to my backlog! Easiest way would be perhaps to create separate variants with smaller font and spacing to make it fit mobile.

  • @dudagfx
    @dudagfx 18 дней назад

    @hoopercraig I think i've found the fix for this! It's not ideal as the animation is not that smooth but at least it doesn't jump around. What i did is i removed links inside the navbar component so when we click the buttons it doesnt trigger the variant change, but i left the scroll variant option on. So when we click on a button in the navbar it scrolls to our desired section and the scroll variant changes the highlight on the navbar. I hope that helps

    • @tonjrv
      @tonjrv 8 дней назад

      That sounds awesome solution, thanks a lot! 🔥

  • @isabelevalter2992
    @isabelevalter2992 22 дня назад

    funny how you just predicts all the possible doubts that may appear about framer 😪 amazing

    • @tonjrv
      @tonjrv 8 дней назад

      Hahah I'm happy to help! 🔥

  • @dragos9studio
    @dragos9studio 23 дня назад

    Hi. My scroll variant transition is instant, instead of smooth like yours. Does anybody have an idea on how to fix that?

    • @tonjrv
      @tonjrv 8 дней назад

      Hey! Check the animations and whether you have set them to be instant. Playing around with the settings there could help!

  • @MODEST500
    @MODEST500 25 дней назад

    my man i think i have seen your unique template. one of the most awesome looking hero section is none other than Appverse.

  • @Alias-49013
    @Alias-49013 27 дней назад

    Great tutorial, thanks. The only issue with this is, that it behaves awkward when not clicking the next or previous item, but e.g. the last one when on top of the page. Because then, the hover state interferes with the variations that are set when sections appear. Anyway to prevent this?

  • @3mr564
    @3mr564 29 дней назад

    how to connect it with a button ??

    • @tonjrv
      @tonjrv 8 дней назад

      You have to create another artboard that has button, and then with prototpying tools connect the button to screen that has the progress bar start state.

  • @rumorscameras
    @rumorscameras Месяц назад

    is it possible to do it in framer> i saw it on the framer website saying their seo optimisation with this circle animation

    • @tonjrv
      @tonjrv Месяц назад

      Great question! I haven't tried it but it should be possible. I can look into it 🙌

    • @rumorscameras
      @rumorscameras Месяц назад

      @@tonjrv great. I think this method eith the rectanhles and half circle rotatikn is possible. Need to see if the 2 half circles can be sunced one after the other to do the zero to 100 rotatjon otherwise u have to do only partly ankmated circle i gjess

  • @alexking4341
    @alexking4341 Месяц назад

    I still don't get it.

    • @tonjrv
      @tonjrv 8 дней назад

      What part you are facing issues with, I can try to help :)

  • @shroots88
    @shroots88 Месяц назад

    Excellent tutorial! Thank you so much for keeping it straight to the point!

    • @tonjrv
      @tonjrv Месяц назад

      Thanks a lot, I'm glad that you liked it!🔥

  • @gorkemorg
    @gorkemorg Месяц назад

    Thanks a lot

    • @tonjrv
      @tonjrv Месяц назад

      No worries!

  • @Yuveraaj07_bajwa
    @Yuveraaj07_bajwa Месяц назад

    where is part 1?

    • @tonjrv
      @tonjrv Месяц назад

      Great question! You can find it here: Learn Figma: How to do timer animation in Figma for beginners ruclips.net/video/w3Z3rQD2qQk/видео.html

  • @simonasommma
    @simonasommma Месяц назад

    thank you for this tutorial! I've gotten up to creating the hover variant, but when I select the text layer and press 'bring to front', the layers move in the left panel but the text still remains hidden behind the ellipses. Do you know why this is?

  • @Billgra_54
    @Billgra_54 Месяц назад

    Guys... It's Toni.... And he's just awesome 😎

    • @tonjrv
      @tonjrv Месяц назад

      Hahah thanks mate! Let's stay awesome! 🔥

  • @luisoliveira6603
    @luisoliveira6603 Месяц назад

    Looks really nice

    • @tonjrv
      @tonjrv Месяц назад

      Thanks mate! 🙌

  • @QuickDump
    @QuickDump Месяц назад

    yo so it works but anything that i have linked in my navigation bar like a drop down menu or a word linked i can click it even tho its invisible

    • @tonjrv
      @tonjrv Месяц назад

      Hey, send me a message in Twitter or in Instagram, and I can try to help you out!

  • @DineshKumar-ci6hm
    @DineshKumar-ci6hm Месяц назад

    Unable to create the Variable and even can't modify the TabName after converting the text to create plain text variable : 2:48 to 4:40

  • @lokey416
    @lokey416 Месяц назад

    Awesome

    • @tonjrv
      @tonjrv Месяц назад

      Thanks mate! 🙌

  • @Zeiira01
    @Zeiira01 Месяц назад

    amazing video ty ❤

    • @tonjrv
      @tonjrv Месяц назад

      No worries! 🙌

  • @arra6531
    @arra6531 Месяц назад

    thanks for the tutorial! i have a question though, is there a way for it to only start rolling when layer/section comes into view? because im trying to apply it to my 2nd section

  • @terjupi1726
    @terjupi1726 2 месяца назад

    You helped me a lot thank you! this is exactly what I wanted to achieve

    • @tonjrv
      @tonjrv Месяц назад

      Awesome to hear that! 🔥

  • @bakiKaradeniz
    @bakiKaradeniz 2 месяца назад

    Great

  • @КозачукДаниил
    @КозачукДаниил 2 месяца назад

    cool!!

  • @kiarak5879
    @kiarak5879 2 месяца назад

    Hey, had a doubt once, I move the side bar to the main frame , the fixed position is disabled for me. what am i doing wrong?

  • @mrmelomaan5955
    @mrmelomaan5955 2 месяца назад

    Excellent thank you so much!! :)

  • @hoopercraig
    @hoopercraig 2 месяца назад

    This was great. However, I found once I added the scroll variant as the last step, and followed everything you did, clicking the tabs in the menu now causes the bg element to jump around while it scrolls from section to section.

    • @kinoomalta
      @kinoomalta 2 месяца назад

      Having the same issue. Did you find a solution? At what point should we add the sections and set up the scroll variants?

    • @kinoomalta
      @kinoomalta 2 месяца назад

      Actually it's jumping around in his live link as well that is in the description. If you don't go in order and click the 3rd item when on home it behaves erratically which is exactly the problem I'm facing.

    • @hoopercraig
      @hoopercraig 2 месяца назад

      @@kinoomalta I didn't, it jumps all over the place for me.

    • @magatsu3642
      @magatsu3642 Месяц назад

      I change the interaction in the menu and up the delay to 0.5. Fix the problem. 7:05

    • @31RIP
      @31RIP 24 дня назад

      @@magatsu3642 doesnt work either

  • @shroots88
    @shroots88 2 месяца назад

    This was great, thank you!

  • @ceciliabelenmorales7883
    @ceciliabelenmorales7883 2 месяца назад

    likeee!! i want

  • @hackur-g
    @hackur-g 2 месяца назад

    can you make a guide on making this menu responsive on mobile

    • @tonjrv
      @tonjrv Месяц назад

      You can use the same method, but making it smaller! Also it is possible to make it scrollable, but that would require bit more work. But that could be a great idea for a video!

  • @oluwaseyifx
    @oluwaseyifx 2 месяца назад

    Awesome 👌. Very creative

  • @isabelevalter2992
    @isabelevalter2992 2 месяца назад

    i love you man

    • @tonjrv
      @tonjrv 2 месяца назад

      Hahah thanks a lot! 🔥

  • @eba-rave7509
    @eba-rave7509 2 месяца назад

    Valuable information, thank you so much! 🙏

    • @tonjrv
      @tonjrv 2 месяца назад

      No worries at all 🙌