Interactive Navigation Menu in Framer (No-code tutorial)
HTML-код
- Опубликовано: 26 июн 2024
- Live demo: interactivenavigation.framer....
Remix this project: framer.com/projects/new?dupli...
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 designer, this step-by-step tutorial will help you add a touch of interactivity to your website.
Chapters:
00:00 Preview
00:30 How to do Navigation Menu Component
04:05 How to add Variants to Component
08:16 Adding Scroll Sections
11:40 Adding Scroll Variants to Menu
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! 
Наука
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 🔥
You make a real video tutorial with powerful value ! Thanks so much fo that
Amazing to hear that mate! 🔥
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 🙌
Clean as usual broski
Thanks bro! 🔥 🔥
Thank you so much sir
No worries at all 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! ✌️
Thanks bro😎
No worries mate! 🔥
Cheers mate
No worries mare, I hope it's useful 🙌
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, 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!
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. :)
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
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.
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