Framer / How to Create Fixed Navigation with Tab Animation (Easy)
Want 3 months of Framer Pro Free? Use my partner link or promo code: www.framer.com?via=dannysapio
(use promo-code "pro-yearly-partner" to get 50% off the pro annual subscription)
Remix link: framer.com/projects/new?dupli...
How to create a fixed header navigation in Framer with animated tabs. This sticky navigation adds a layer of interaction to any website and it's super easy. This uses a feature called scroll variants inside of Framer and doesn't require any code.
Follow on Twitter for more design tips & tutorials: / dannysapio
dannysapio.com
Пікірлер: 66
I’ve not tried this yet but I’ve been stumped on this one for a few days, massive thank you for uploading this.
For sure the best upload of the day for me! please keep them coming, we need this !
Simple, smooth, and effective! Great tutorial ❤️🔥
Great video! Straight to the point and easy to follow.
Thanks Danny! Iwas trying to figure out how to do this for a client project, you saved me a bunch of time!
Bring more we love this ❤
It helped a lot Danny. Almost Lifesaver
Very useful and quick tutorial! Thank you very much
Thanks man video was really helpful. keep them coming, cheers.
Great video! So simple, thanks :)
Thank you for making this tutorial
This was so great n helpful bro. tnx ✨
Great tutorial, thanks
This helped alot, Thank you so much
Excellent. Thank you.
Thank you.. it’s helpful
Very helpful, thank you for sharing!!=
Thank you, super helpful and easy to follow tutorial! The information I'm missing is how to change the names of the items. ;)
The best video ☺️
Great video and easy to follow... what about if you want to make the nav bar itself a component? How does the scrolling and linking work then?
Nice tutorial, thanks! Does Framer let you animate between inactive/ active states on adjacent variants?
Thanks for you tutorial, very usefull, but when i create a component of my navbar to have a responsive variant of it, i lost all my links effect, do you have a solution for this ? 🧡
Hey Danny great video! Is there way to do it when navigation is a component as well not only links? I tried to do it but could not figure out.
thanks a lot!!!
Hey Danny, very helpful video!! I am stuck in one area, my header has too many options and i have used fill option for width. However the hidden content doesn't show when I scroll to different sections. Can you help? What I am looking is something similar to figma's crop content feature
Thank you Danny! I have a question for you: how did you manage this navigation bar on the Phone view? Since I have more than 3 items, I've been trying to make it a scrollable bar on mobile, where the current Nav item is always centered and automatically scroll it horizontally when I scroll to the next page section. Do you know if there is a way to do this? Thank you again!
Thanks for sharing, I was trying to get this done with a Tab view type of layout but seam not to be working. So say inside a section you have different content based on specific tabs headers
hello, Framer is awesome . But the effect in nav is "fixed" instead "stiky", that worked for me.
Great Video! can you tell me how i can make smooth scroll on my framer website?
How do we change the name of the Component, for example in your video you have mad Nav item to evry navbar component but can we change the name of the component?
Danny i have a question. Im trying to make a header section that whenever you click it shows a variant that goes down. For example if i have a page of Jeeps, when i click models on the header id like it to expand to be able to show an interactive set of cars with customizations. The problem comes when i click it, it just won't expand and won't show properly... If you don't understand i can show you the page i'm creating on framer, cheers boss.
How did you adjusted the title afterwards
bro, how can I make this cursor effect? It's so smooth
how do you keep it selected when on that section?
Hey Danny! Great Videos man! If you wanted to build this as a table of contents for a Framer blog - How would you go about it? It would need to populate dynamically based on the headings for each blog article.
@dsapio
Жыл бұрын
Message me on Twitter and we can work through it
Hi Danny I’m new to Framer and just recently discovered your channel. I signed up for Framer how could I use your 3 months free because I already signed up for 1 month? Can I still use your code on my next month? Or do I let my current subscription expire first? Then after 3 months can I also use the annual 50% discount? Thanks.
I loved it! Btw, what is the software / tool you use to record the tutorial? I love the effect and how it looks on screen. Thanks in advance!
@dsapio
Жыл бұрын
Screen.studio
@majebell
Жыл бұрын
@@dsapio thanks!
how to do this when working with a component? from the component view I just cannot see the scroll sections defined in the main editor :(
In my position type, it's greyed out :(, I also arranged all the elements in columns. Any idea why this is so? thanks
how do we change the text on navbar, I created that component and now I want to change the name but nothing happens I come up on the component section. what do I do?
How can i move in between the tabs?
How to do "Active Page" Active Menu in framer? Can you please help out with this?
Is there a way to do this and also make the tabs clickable?
🔥🔥
I don't see the Section option when creating link variables
Please someone help Me change the name of nav components I can’t figure it out 😭😭😭😭
Thanks for the content and the great video! This is exactly what I wanted on my page... I followed the instructions and repeated the process now 5 times, but its not possible to choose "sticky" even though all layers are overflow visible. Also I realised the navigation stack can not "fill" in width when moving to the desktop section... Idk if this has something to do with it and I can not find my mistake.
@dsapio
Жыл бұрын
If your page is set to use “layout” then sticky should be an option. Check out the remix link to see if you missed something along the way. Sometimes copy and re-pasting your component can fix issues of Framer isn’t updating - it can happen from time to time.
@ivanaperica
Жыл бұрын
@@dsapio Thank you so much! It was the missing "Layout" :)
Can someone help me create a frontend code for this design?
which tool you have used to record your screen?
@dsapio
Жыл бұрын
Screen.studio
Any idea on how to make nested menu for the navigation bar? Been trying to figure it out for months
@dsapio
Жыл бұрын
Each item in the nav bar needs to be a component. On hover you can trigger the secondary menu.
@tanzeelurrehman220
Жыл бұрын
Thank you!
i dont see the smooth scroll button
great! But after setting ,there's a problem:the texts in the below section will be exited in the nav bar. is it possible to solve?
@dsapio
Жыл бұрын
Can you explain this further? Not sure I’m understanding the issue
@Rowan_H
8 ай бұрын
Set Z index to 0 in Styles
how do you change a menu item name, since it's a component, it keeps applying it to all; is it name, default, or placeholder?
@maylyn2189
2 ай бұрын
you can change the name by creating a variable on the component for text content
@kemetic_
8 күн бұрын
@@maylyn2189please explain in more detail
Are you from Israel?