Show & hide navbar on scroll

Lesson info

In this example, we'll add an interaction to our navigation bar to animate out when scrolling down the page—and animate back in when scrolling up again. This lesson is covered in two parts creating triggers and animations for the navbar leaving when scrolling down and entering when scrolling up.

Open this project in Webflow

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Here is a persistent navbar. Fixed position. But when you scroll down the page, the navbar gets out of your way. And when you scroll up? It presents itself smoothly, so you can interact with it again. And when you scroll down again? It goes away.

We'll cover setting up an interaction with this navbar which responds to when the page is scrolled. And we'll do this in two steps: (1) we'll set up a trigger and an animation to tell the navbar when to leave, and (2) we'll set up another trigger and animation which will tell the navbar to enter again.

Let's start with the first part. We'll go in and make sure our navbar is selected. And an important note here: even though it's going to be leaving and entering based on scrolling, we need to make sure the navbar is fixed to the viewport. That way it's still visible when we're not at the top of the page.

Over in the Interactions panel (where it says Interactions), let's set up a trigger for when the page is scrolled. Right now, our goal is to tell the navbar to leave when we scroll down. So under scroll down, let's start an animation. We'll create one, and call it something like Nav Leave. (You can put anything here.)

And essentially, all we have to do is create a single action. We want the navbar to move (up), and we want it to move up far enough so it's outside of the viewport. Let's hit play. Looks good, but we can make a couple adjustments. We'll choose a smoother easing curve, and maybe we want the duration to be slightly less. (We want the navbar to animate more quickly.)

Let's test this out in Preview. If we scroll down, it moves up and out of the viewport. Just as we want. Unfortunately, it's gone. And when we scroll up, it's still gone.

Let's leave Preview. Now remember: we can select and animate other elements on the canvas as well. (We can add other actions for those, too.) But for now, we'll make sure our Navbar is selected (we can always use our bottom navigation for precision). And we'll go back to our trigger.

Let's go in and create an animation which will play out when we scroll up. This is a new animation, and we can call this one Nav Enter. We'll create an action to move — we'll simply adjust the position so we're back to zero. Go into our easing, we can make a selection there — go into our duration, change that if we'd like. And when we're ready, let's check this out in Preview.

There's our navbar. You can see that as we scroll up, the navbar enters. As we scroll down, the navbar leaves. Enter, leave. And that's it! The navbar leaves when scrolling downward, and enters again when scrolling upward.