- 33
- 212 563
Toni Järvinen - Design Tutorials
Switzerland
Приєднався 18 січ 2023
Framer and Figma tutorials, and design tips. 🪄
Top 10 Widgets to Embed on Your Website | Framer Tutorial
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 boost your site's performance. Don't miss out on these essential add-ons that can take your website to the next level!
Booking Calendars: www.bookingmood.com/?ref=toni
Google Calendar: calendar.google.com/
Weather Widgets: weather.tomorrow.io/widget/
Spotify: spotify.com/
Google Maps: maps.google.com/
x/Twitter: x.com
Trail routes: www.alltrails.com/
Countdown Timer: logwork.com/countdown-timer
Chapters:
00:00 Introduction
00:42 How to Add Embed Widgets to Framer Site on Website
01:07 How to Add a Free Appointment Scheduler on Website
03:34 How to Add a Booking Calendar on Website
06:12 How to Add Weather Widgets on Website
08:02 How to Add Spotify Playlists on Website
09:37 How to Add Google Maps Reviews and Locations on Website
11:17 How to Add a Twitter Feed on Website
15:59 How to Add Trail Routes on Website
17:50 How to Add a Countdown Timer on Website
19:03 How to Add a TikTok Profile and Videos on Website
Don't forget to like the video if you find it helpful and subscribe to our channel for more Framer tutorials and design inspiration.
_________________________________________________________
Find me on other channels:
Twitter/X: tonjrv
Instagram: tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!
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 boost your site's performance. Don't miss out on these essential add-ons that can take your website to the next level!
Booking Calendars: www.bookingmood.com/?ref=toni
Google Calendar: calendar.google.com/
Weather Widgets: weather.tomorrow.io/widget/
Spotify: spotify.com/
Google Maps: maps.google.com/
x/Twitter: x.com
Trail routes: www.alltrails.com/
Countdown Timer: logwork.com/countdown-timer
Chapters:
00:00 Introduction
00:42 How to Add Embed Widgets to Framer Site on Website
01:07 How to Add a Free Appointment Scheduler on Website
03:34 How to Add a Booking Calendar on Website
06:12 How to Add Weather Widgets on Website
08:02 How to Add Spotify Playlists on Website
09:37 How to Add Google Maps Reviews and Locations on Website
11:17 How to Add a Twitter Feed on Website
15:59 How to Add Trail Routes on Website
17:50 How to Add a Countdown Timer on Website
19:03 How to Add a TikTok Profile and Videos on Website
Don't forget to like the video if you find it helpful and subscribe to our channel for more Framer tutorials and design inspiration.
_________________________________________________________
Find me on other channels:
Twitter/X: tonjrv
Instagram: tonjrv
Threads: www.threads.net/@tonjrv
________________________________________________________
If you have any questions or suggestions, please leave them in the comments section below. Let's dive into the world of interactive design with Framer!
Переглядів: 2 580
Відео
Custom Video Player in Framer (No-code tutorial)
Переглядів 2,2 тис.4 місяці тому
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)
Переглядів 3,3 тис.4 місяці тому
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
Переглядів 6 тис.5 місяців тому
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)
Переглядів 19 тис.5 місяців тому
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 тис.6 місяців тому
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)
Переглядів 4 тис.6 місяців тому
See the first tutorial on counting timer: ua-cam.com/video/w3Z3rQD2qQk/v-deo.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:1...
Interactive Pricing Section - Framer No-Code Tutorial
Переглядів 2,1 тис.7 місяців тому
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
Переглядів 11 тис.7 місяців тому
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 тис.8 місяців тому
Create your free Framer account: www.framer.com/?via=tonjrv Live website: noiseanimation.framer.website/ Remix the project for free: framer.com/projects/new?duplicate=MRmIIZdE4v2YpNYEHFOs&via=tonjrv Noise & Texture Plugin: www.figma.com/community/plugin/1138854718618193875/noise-texture In this video, we'll guide you through the process of creating a cool website animation with Figma Plugin, an...
Card Animation in Framer with Scroll Variants | No-Code Tutorial
Переглядів 4,1 тис.8 місяців тому
Live demo: cardtutorial.framer.website/ Remix this project: framer.com/projects/new?duplicate=HE7gUy4bjdgpmavI76Qx&via=tonjrv In this video, we'll guide you through the process of interactive animated info cards in Framer. We will use Scroll Variants and Scroll Sections to achieve the effect. Whether you're a beginner or an experienced designer, this step-by-step tutorial will help you add a to...
Best Design Tools To Learn in 2024
Переглядів 2,7 тис.9 місяців тому
Best Design Tools To Learn in 2024
Spline x Framer: 3D Websites with real objects using Gaussian Splatting | No-code Tutorial
Переглядів 13 тис.9 місяців тому
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,7 тис.10 місяців тому
Animated Rainbow Button Component in Framer | Step-by-Step No-code Tutorial
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Переглядів 20 тис.10 місяців тому
Interactive Buttons in Framer | Step-by-Step No-code Tutorial
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Переглядів 4,7 тис.10 місяців тому
Responsive Card Section in Framer | Step-by-Step No-code Tutorial
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Переглядів 6 тис.10 місяців тому
Animated Hue Cards in Framer | Step-by-Step No-code Tutorial
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Переглядів 1,6 тис.11 місяців тому
Rolling Text Animation in Figma | Step-by-Step Prototype Tutorial
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Переглядів 39 тис.11 місяців тому
Rolling Text animation in Framer | Step-by-Step No-code Tutorial
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Переглядів 3,6 тис.11 місяців тому
Framer tutorial: Interactive Tooltip in under 2 minutes (No-code)
Learn Figma: Animated Border in Figma for Beginners
Переглядів 4,7 тис.11 місяців тому
Learn Figma: Animated Border in Figma for Beginners
Framer tutorial: Animated Border in 2 minutes (No-code)
Переглядів 9 тис.11 місяців тому
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
Переглядів 27 тис.Рік тому
Learn Figma: How to do timer animation in Figma for beginners
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
Awesome
amazing video ty ❤
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
You helped me a lot thank you! this is exactly what I wanted to achieve
Great
cool!!
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?
Excellent thank you so much!! :)
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.
Having the same issue. Did you find a solution? At what point should we add the sections and set up the scroll variants?
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.
@@kinoomalta I didn't, it jumps all over the place for me.
This was great, thank you!
likeee!! i want
can you make a guide on making this menu responsive on mobile
Awesome 👌. Very creative
i love you man
Hahah thanks a lot! 🔥
Valuable information, thank you so much! 🙏
No worries at all 🙌
How do i change the logo after creating different variants of the navigation bar?? Help please.
Good question! If you update it to the first variant it should update it to all other variants automatically 👍
Thanks for the video! This is exactly what I was wanting to do for my portfolio website. Question, did you get a "nested links" optimization error when publishing the website? I dont know why I keep getting one
Awesome to hear that! 🙌 Nested links means that you have two links inside the same stack, so make sure that only one layer inside the buttons/links etc has a link included. Let me know if you need further help.
@@tonjrv Thank you so much for the response! I managed to figure out my issue with the nested links. I had one more question, if you happen to know. If you open your website in the description, if you go to the last link from the first link you will notice the animation jump around as it scrolls up the page. This is because of the scroll variants. Do you know what I mean and do you know a fix for this?
Ndd' Naoow..❤
First of all, huge help and absolutely fantastic and easy to follow video. One question, how do you deal with the problem with this where on mobile, when you tab the video the video controls stay there?
Thanks mate! 🙌 I actually noticed the same issue and fixed it to these components that you can remix: videocomponent.framer.website/ I was supposed to document what I did for the fix and share it here earlier, but I forgot to do that. And now I can't remember what was the fix there. But you can remix the components from the link and try to find what's differently there compared to what I show in video. I remember it was easy thing to do. I'll comment it here once I figure it out again. And sorry about the issue ✌️
how to make it stop speeding up around corners?
Good question, but I don't have a direct answer. You can play around with the size of background layer and the animation speeds to ease it out.
Man I was searching everywhere for this thank you 🤝
No worries, awesome to hear that it's useful! 🔥
Great tutorials as usual.
Thanks a lot! 🔥
Well Done bravooooo
Thanks mate! 🔥
COOL
🔥🔥🔥
I tried, but when I am on my homepage and click in the menu to another section down below, it also disappears. I only want it to disappear if I am scrolling, not when I am using the menu. Does anyone know how to fix this?
Good question! You could try to set the transition to be instant instead of smooth for the link. That would be my best without trying it out. Let me know if that works!
Good method that worked for me. The fact Figma still haven't made a simple radial progress preset option is just insane to me.
Thanks a lot mate! 🔥 And I totslly agree, I used to work with smartwatches and it blew my mind how complicated simple stuff like this is to do.
Is there a way to make the navigation bar smaller? I am trying to edit one for phone as well and the bar is way too big. It is perfect on desktop though, love the tutorial.
Awesome to hear that! 🔥 You can try to create a new component or variants with smaller font-size and spacing to make it work with mobile 👍
Really good, and easy one
Awesome to hear that mate 🔥
IM NEW TO FRAMER!! THANKYOU SIR FOR THE TIPS FROM PHILIPPINES!!!💯💯💯💯
Welcome to Framer family mate! And no worries at all🔥
How did you duplicate animated border card frame? When I do it, I can't edit the gradient border rotation on duplicated frame
Can you also make custom timeline in framer or do you use framers preset
I think that would require some code override to work properly, so I think it's safer to use the preset here. But this could be nice to explore at some point!
Just tried this, worked perfectly. Thanks for the videos 👍
Awesome to hear that mate! 🔥
Great video overall! But man that camera constantly zooming around is disorienting 😵💫 haha. Good content though 👍
Great feedback! I'll aim to reduce motion in the upcoming videos 🫡
This is amazing! Thanks for sharing!
Awesome to hear that mate! 🔥
Totally love your content. Please keep posting! And btw, how do you screen record with those mouse and zoom animations??
Thanks a lot mate, I will do so! 🔥 And it's all done with ScreenStudio, it's super easy to use. You can check it out from here: screenstudio.lemonsqueezy.com?aff=zXV1p
@@tonjrv Thanks man! <3
Best order for me to understand would be showing what you will accomplish with steps>then show how and slow up and explain why each step is chosen
Great feedback and that totally makes sense! I'll aim to include this into my future videos 🫡
Thank you for this tutorial
Great to hear you enjoyed it! 🔥
Good sir u are just awesome. I have a query, instead of shadergradient its showing 'the graphic context has been lost.' Can u help me.
Awesome work buddy. I have a query, instead of showing gradient, it's showing 'gradient context has been lost'. Can u please help me
Thanks a lot mate! Is this message coming in framer or when publishing the site? You could try to redownload the component through Shadergradient website.