I love using Framer. And I love navbars and footers, just give it to me.
In this article, I’ll show you a simple way to animate an adaptive navbar. Switching from clear, to light, to dark with a smooth, natural transition. Let’s jump in!
The Navigation Bar
For this demos’ sake, I have already created the navbar. First, I created the navbar with no background and created a component from it. Then I made four variants based on the background: clear, dark, filled-dark, clear-light, and filled-light.
The Navbar sections
To know when to change the variant of the navbar, we first need to define the section where the navbar changes. This is super easy in Framer!
First, let’s start at the top. We want to immediately go to a filled background when we start scrolling. So we select the top element hero, and down at the right in the menu, add a Scroll Section and a slight negative offset like -10. This is for the change from clear to filled just after you start scrolling.
The next place we want to change the navbar is when the background turns white. Therefore we mark this section and add a Scroll Section name to this one as well.
Repeat this for all the sections you want the navbar to change, and let’s jump to the (even more) fun part.
The Animations
The navbar clear-dark is in place with the position set to Fixed and pinned to the top, left, and right. Now we want it to change based on the sections we already defined.
Make sure your navbar is selected, then in the right menu, press + on Effects and add a Scroll Variant.
Then set the Trigger to Section in View, after that, you can start adding your sections. First, we choose the section Hero and set the variant to filled-dark. Then we add a section for the next one and set the variant to filled-light. That way we work our way down the page. When you’re done, your Scroll Variant will look something like this.
That’s it! You can see the live website here.
You can buy ($9) and remix the full template here: Remix Project.
Leave a Reply