Show & Hide Navbar on Scroll - Webflow interactions and animations tutorial

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.

Steps in the video:
00:00 - Introduction
00:34 - Leave on scroll down
01:57 - Enter on scroll up

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

Get started with Webflow:

[Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[SachinYadav-tekr]

Yesss! This just took me 10 minutes to figure out. Thank you!

[jonathanli]

@webflow Hi guys, I was following this interaction tutorial and it worked flawlessly for the desktop. On mobile however, the hamburger menu won't show up when tapped on until a user scrolls up and then down again. Is this a bug? Or do I need to make some changes somewhere that's not covered here in the tutorial? Thanks in advance guys.

[badementrix]

Thank you so so so much! I've just started exploring Webflow and this tutorial was extremely helpful!

[EPSTomcat]

Love these short tutorials! More please :) Some suggestions:

1) Always displaying a footer on the bottom of the viewport - essentially an overlay on top of the scrolling content
2) Similarly, to #1, always displaying an icon overlayed on the bottom right of the viewport
3) Responsive modal dialog overlay with scrolling content with two different dimensions/sizing (one for mobile and one for tablet/desktop)

[j.r.]

When I put this on my Navbar it kills the width settings for no reason. 100% width not working any more – Default navbars are strange.

[conniesawatzky]

This is the old set-up. Can't figure out with the new set up 0% and 100%. I'm just not getting it. With the new set-up do you need two actions??

[cj.marecek]

Hey guys, great video, one question. Why is the nab bar not there when the page loads? All animations work for me when I scroll a bit it appears, but it’s not there after the load. Any advice? Thanks 🙏

[noahsscott]

Like others here, the navbar only disappeared going down but would not appear when scrolling back up until at the very top of a page. I think this is because the scroll up animation sets the nabvar to its original position which is 0px, at the top of the page. To fix this, apply the animations following this tutorial to your navbar element, then set the nabvar to position sticky ;) the navbar will still disappear on scroll down, but reappears at any position down a page due to the sticky position property.

[Zompfg]

For me the scroll up interaction doesn't work either after I set the scroll down one up.

[SuperRadChad]

Question. My When Scrolled Up animation won't let me click the plus sign, even though the navbar is selected. It says Select an element...

[Six-pxll]

i did this as explained and it worked fine although... when I start to scroll up mid-way way it re-appears prematurely .. anyone come across this?

[ralph]

Instead of the navbar showing up when scrolling up, how do you do it that it only shows up when scrolling to the top of the page?

[faisal-rashid-apollo]

Hi people, Im new to Webflow, loving it so much. I implemented this nav bar appear and disappear effect on scroll, however on tablets the hamburger menu disappears when I try to scroll down to access more links in the menu. Is there any way I can disable the animation when dropdown menus are clicked? Thanks in advance

[Soljardel]

how do you create that effect with the background static and the foreground moving up and down on top of it when you are scrolling?

[yashraje]

Random question; but does anyone know how they made the sections scroll over the background image like that?

[kurtmiller]

for some reason this is only workin on my homepage (where I made the edits), do I need to do something to apply the animations to all pages? They're all using the same "header' class

[steveworrell]

Do I have to create this animation for every page on my site?

[JorisJorisJorisJoris]

You know what's the real pain about your tutorials?
The first 5 seconds making you question wether my sound is on or off.
Then you turn the sound full power and nearly gets a heart attack in the incoming second.
Gets me. Every. Single. Time.

[StanOwden]

When setting the animation for the navigation bar, it only works on one page. The various pages must be made by hand. This is how it should be or am I missing something. My Navbar was installed as a component before I installed the animation. Will it have something to do with it?