Hi Toni, thank you for the video! I have a question about using the same animation on different pages. When I link the tab to different pages instead of sessions on one page, the background animation under text becomes stuck and moves rigidly without any transition. Do you know how I can solve this issue?
I think you cant, as the browser has to load a whole new page and because of that new pages load instantly ie no smooth transitions. These types of animations work well on only apps when you have to move around pages as there is virtually no page loading delay
Great question! And as mentioned above, at the moment there's no way to do that in Framer for multiple pages. Hopefully we found a solution for that at some point! ✌️
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.
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.
Great tutorial, thank I’m getting into Framer and wondering do you have a basics video for newbies? Also love the video editing too, how do you record this and especially the movements around the screen?
Thanks a lot mate! 🔥 I've been planning to do a proper "How to get started" video at some point, but haven't managed to do so yet. But you can find the "Framer for beginners | Tutorials" playlist from my channel that includes some videos that are perhaps bit more targeted towards beginners. And the video is recorded with Screen Studio, it automatically tracks your mouse movement and makes videos like this super easy to create! You can check more from here: screenstudio.lemonsqueezy.com?aff=zXV1p Btw, I'd love to hear if you have any specific video ideas in mind ✌️
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?
Nice one! Was wondering before how to do that moving background layer. Now I know:) Is there a way tho to have it pixelperfect behind each section/label or is that just a matter of visually balacing the items..
Awesome to hear that! And great question, you can make it easily picture perfect when you go to those section variants, and tap from the section name inside the nav bar, and then hold the option key to measure the distance to BG layers edges, and then you can easily make the paddings picture perfect 🙌
Thank you for this tutorial, Toni. 🙌 How can we make this nav design responsive? Do we need to create a new component for the tablet and mobile version?
No worries mate! 🔥 Yeah to make it responsive you can either do a new component or you can just do separate variants for mobile inside the same component
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.
I followed the same steps except I linked it to different pages on my website and it is not working. It only shows up on hover. Any reason this could be happening?
Unfortunately for the time being this only works on the same page, since when you change page the Framer loads the component again and therefore the animation doesn't work. You could perhaps make it so that the background is responsive to hover states and then when you change the page the transition feels smoother!
Thank you for this tutorial, super helpful! I was wondering if there's a way to do this exact same thing but linking each element of the menu to other pages, instead of scrolling down to each section, while maintaining the fluid interaction of the green frame smoothly gliding across pages? It works fine when scrolling to a section on the same page but the interaction breaks when linked to a different page :( Thank you Toni!
Awesome to hear that! 🔥 And that's a good question, at the moment I think that it's not doable without any code component to achieve similar effect to different pages. But I'd be curious if someone here would have a solution for this!
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!
Great question! You can try to add a new variant and scale the nav bar bit smaller for the mobile. Or then you can just add a new variant and create a traditional navbar for mobile. :)
Hello Friend, Toni, This was awesome, Im a new website designer and I would like to lean this skill from you and in return I could do some simple time consuming things or grunt work, cold calling etc.. fixing websites. for you at no charge to show you as my skills grow to hopefully earn your trust for some bigger jobs in the furure. Could we talk about a paid training to teach me interactivive Navigation bars, I think this is an essensial skill ffor 2024 and onward and i wold be willing to pay for the training also. Please let me know if we can talk . Thank you Jay. Your the best , You are the only one I seen that shows this process.
Thanks a lot mate, I appreciate your comment! 🔥 Unfortunately at the moment I'm also working as a sole designer, but I'll keep you in mind if I have expansion plans in the future. Keep it up mate!
@@tonjrv In Elementor, you just make a nav bar (drag and drop) then set an anchor point (drag and drop onto page) to each nav bar item. My first ever website was a simple one page layout with this kind of navigation and it only took a couple of minutes to set up. I've been messing with Framer since yesterday and it seems more convoluted than Elementor. The only thing I prefer about Framer is having the desktop, tablet and mobile layouts all visible at once. The free version of Framer apparently doesn't allow me to use my existing domain, which means I need to pay for Framer, on top of what I'm currently paying to host my domain. Elementor does this for free, as it's using Wordpress. Framer free also forces a banner. Elementor also benefits from a plethora of free 3rd party add-ons.
@@tonjrv I'm pretty sure that you can do it in Elementor Pro, but I use the free version. The free version definitely highlights the menu items, but I don't think it has the subtle transition animation. But as Framer free locks me out of key features, I wouldn't be able to utilise that tool anyway.
Thank you Toni, this is exactly what I'm looking for as a beginner.
Keep going, man.👍
Awesome to hear that mate! I'll try my best 🔥
Man I was searching everywhere for this thank you 🤝
No worries, awesome to hear that it's useful! 🔥
You make a real video tutorial with powerful value ! Thanks so much fo that
Amazing to hear that mate! 🔥
Hi Toni, thank you for the video! I have a question about using the same animation on different pages. When I link the tab to different pages instead of sessions on one page, the background animation under text becomes stuck and moves rigidly without any transition. Do you know how I can solve this issue?
I think you cant, as the browser has to load a whole new page and because of that new pages load instantly ie no smooth transitions.
These types of animations work well on only apps when you have to move around pages as there is virtually no page loading delay
Great question! And as mentioned above, at the moment there's no way to do that in Framer for multiple pages. Hopefully we found a solution for that at some point! ✌️
Bro youre so awesome. I just found of your channel. Simple and straight to the point! Subscribed
Dont stop please
Awesome to hear that mate! 🔥 I'll keep going 🙌
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.
I change the interaction in the menu and up the delay to 0.5. Fix the problem. 7:05
This is exactly what I was looking for ❤ thank you. Subscribed!
Awesome to hear that mate! 🔥
Great tutorial, thank I’m getting into Framer and wondering do you have a basics video for newbies?
Also love the video editing too, how do you record this and especially the movements around the screen?
Thanks a lot mate! 🔥 I've been planning to do a proper "How to get started" video at some point, but haven't managed to do so yet. But you can find the "Framer for beginners | Tutorials" playlist from my channel that includes some videos that are perhaps bit more targeted towards beginners.
And the video is recorded with Screen Studio, it automatically tracks your mouse movement and makes videos like this super easy to create! You can check more from here: screenstudio.lemonsqueezy.com?aff=zXV1p
Btw, I'd love to hear if you have any specific video ideas in mind ✌️
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 🫡
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?
Clean as usual broski
Thanks bro! 🔥 🔥
Nice one! Was wondering before how to do that moving background layer.
Now I know:) Is there a way tho to have it pixelperfect behind each section/label or is that just a matter of visually balacing the items..
Awesome to hear that!
And great question, you can make it easily picture perfect when you go to those section variants, and tap from the section name inside the nav bar, and then hold the option key to measure the distance to BG layers edges, and then you can easily make the paddings picture perfect 🙌
@@tonjrv Good one! Thanks! And keep up the great work😎
Thank you for this tutorial, Toni. 🙌 How can we make this nav design responsive? Do we need to create a new component for the tablet and mobile version?
No worries mate! 🔥
Yeah to make it responsive you can either do a new component or you can just do separate variants for mobile inside the same component
@@tonjrv Thanks for the reply. Looking forward to more tutorials from you.
amazing video ty ❤
No worries! 🙌
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 👍
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 👍
I followed the same steps except I linked it to different pages on my website and it is not working. It only shows up on hover. Any reason this could be happening?
Unfortunately for the time being this only works on the same page, since when you change page the Framer loads the component again and therefore the animation doesn't work.
You could perhaps make it so that the background is responsive to hover states and then when you change the page the transition feels smoother!
Thank you for this tutorial, super helpful! I was wondering if there's a way to do this exact same thing but linking each element of the menu to other pages, instead of scrolling down to each section, while maintaining the fluid interaction of the green frame smoothly gliding across pages? It works fine when scrolling to a section on the same page but the interaction breaks when linked to a different page :( Thank you Toni!
Awesome to hear that! 🔥 And that's a good question, at the moment I think that it's not doable without any code component to achieve similar effect to different pages. But I'd be curious if someone here would have a solution for this!
can you make a guide on making this menu responsive on mobile
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!
Thank you so much sir
No worries at all mate! 🔥
would there be a mobile version of the nav bar?
Great question! You can try to add a new variant and scale the nav bar bit smaller for the mobile. Or then you can just add a new variant and create a traditional navbar for mobile. :)
Thanks bro😎
No worries mate! 🔥
Cheers mate
No worries mare, I hope it's useful 🙌
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 🫡
Hello Friend, Toni, This was awesome, Im a new website designer and I would like to lean this skill from you and in return I could do some simple time consuming things or grunt work, cold calling etc.. fixing websites. for you at no charge to show you as my skills grow to hopefully earn your trust for some bigger jobs in the furure. Could we talk about a paid training to teach me interactivive Navigation bars, I think this is an essensial skill ffor 2024 and onward and i wold be willing to pay for the training also. Please let me know if we can talk . Thank you Jay. Your the best , You are the only one I seen that shows this process.
Thanks a lot mate, I appreciate your comment! 🔥
Unfortunately at the moment I'm also working as a sole designer, but I'll keep you in mind if I have expansion plans in the future. Keep it up mate!
@@tonjrv Thank you much
word of advice, too much zooming in and out and panning on the screen. I watch tutorials sped up and the constant movement is hard on the eyes
Thanks for the feedback! I'll try to make it better in the upcoming videos 🫡
This is so absurdly complicated compared to Elementor.
Hey! That can be the case, do you have a resource showing how it's done in Elementor?
If you haven't tried Framer I recommend you to try it out mate!
@@tonjrv In Elementor, you just make a nav bar (drag and drop) then set an anchor point (drag and drop onto page) to each nav bar item. My first ever website was a simple one page layout with this kind of navigation and it only took a couple of minutes to set up.
I've been messing with Framer since yesterday and it seems more convoluted than Elementor. The only thing I prefer about Framer is having the desktop, tablet and mobile layouts all visible at once. The free version of Framer apparently doesn't allow me to use my existing domain, which means I need to pay for Framer, on top of what I'm currently paying to host my domain. Elementor does this for free, as it's using Wordpress. Framer free also forces a banner. Elementor also benefits from a plethora of free 3rd party add-ons.
Sounds nice! And does it animate the nav bar when scrolling?
@@tonjrv I'm pretty sure that you can do it in Elementor Pro, but I use the free version. The free version definitely highlights the menu items, but I don't think it has the subtle transition animation. But as Framer free locks me out of key features, I wouldn't be able to utilise that tool anyway.