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.
Thanks for contributing. Saved me a bit of frustration. In my case the functionality both up and down were working but not on mobile. It would leave but then reappear at the top of page rather than top of viewport. Experimented for a while then came back here. Thanks so much. Maybe someone with mobile issues like me, will see this and save them time as well.
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)
Choose fixed position, and set the units in terms of viewport height (vh) and viewport width (vw). For example on your footer, set your height to 10vh and your y-position to 90vh. There are many more options in the style panel under layout. Post in the forums
@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.
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.
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 🙏
Probably need to make the navbar a symbol and then use that symbol when you make other pages. I believe triggers/animations persist with symbols. I could be wrong though.
@@joshuabruce351 hi :) i got nto your page: www.madebyidealab.com/ and i love your menu from nav bar..do you know any tutorial where i can find directions to replicate the interaction idea? i want to do the same animation with other size, colors and content (social media icons, etc), by replacing the default menu, webflow offers when dragging the default navbar so that i can make my own. (in fact i'm ok with default navbar..i've already edit it, replaced hamburguer menu for a lottie and even triggered well the menu on time opening and closing it...the thing is the default menu is just not what i want to see :( please help ..i've been using webflow for almost a week ..first time trying a webpage and now i want to upgrade my knowledge and skills but i feel stuck
It works perfectly in desktop, but when it comes to mobile, when I tap the default menu icon in the NavBar, the menu pop-up window does not fully appear. What should I do?
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?
If this is the case, and I think you are right from the testing I have been doing, this tutorial doesn't really help unless you only intend to use this on a single page website where there will only be one instance of this animating navbar. Most users will want to use this on sites with more than one page. To add to this, Webflow's Interactions system has changed a bit since the tutorial was published so following it step by step no longer works. I managed to get the Navbar animate off the screen but having it return so far does not work Webflow folk, please update this tutorial with a method and tutorial that does work as many will want to use it, currently it does not work.
I got it to work - For anybody else wanting to know how to do this you'll need to add a starting point and ending point for both scroll down and scroll up animations. But it still does not if the animated Navbar is converted to a Symbol, the animations are lost.
Hey guys, since this animation plays on page load, you'll need to create the trigger on each page in your project. However, after you create the animations (Navbar enter and Navbar leave) for the first time, you won't need to create them again. All you'll need to do is: 1) Go to each page 2) Add a page load trigger 3) Choose Navbar enter under Scrolled up 4) Choose Navbar leave under scrolled down Another thing to note here is that if you haven't saved your fixed navbar as a symbol, you'll need to apply the animations to the fixed navbar class so it works on all pages. So, just edit the Navbar leave and Navbar enter animations, select the action and set it to apply to the class like this: cl.ly/3O3X3X1s1s0y Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're having any trouble implementing this animation, you can always post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.
It doesn't affect accessibility. It's the same type of UX in mobile web browsers. For example, while using the mobile Safari app, the address bar slides away as you scroll down the page but can still be accessed when you scroll back up.
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
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
@@Webflow The interaction works well on desktop and preview for mobile. But when I open it on mobile it work only when I'm on the hero section. In trigger settings the trigger for mobile is on. What can be the issue?
Hey Sebastian, could you please tell us a bit more about the issue you're having? I highly recommend that you post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link (wfl.io/2Tupw47), screenshots and a description of the issue), and our amazing community and staff can help you there.
@@Webflow Thanks a lot. Its part of what im looking for. This video show the animation on the nav bar only.My main concern is involving the other elements on the the page like on this template webflow.com/templates/html/uncommon-portfolio-website-template
We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
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.
HOLY MOLY YOU SIR ARE A GOD
for some reason my navbar STILL only shows up when i scoll back up to the very top :( idk what's wrong, i already set it to sticky
Thanks for contributing. Saved me a bit of frustration. In my case the functionality both up and down were working but not on mobile. It would leave but then reappear at the top of page rather than top of viewport. Experimented for a while then came back here. Thanks so much. Maybe someone with mobile issues like me, will see this and save them time as well.
@@hannnniya did you ever figure this out?
In the Nav enter animation, I tried to set the "Transform Y" value to 0 instead of 0 PX, and it seems to be working well
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)
Choose fixed position, and set the units in terms of viewport height (vh) and viewport width (vw). For example on your footer, set your height to 10vh and your y-position to 90vh. There are many more options in the style panel under layout. Post in the forums
Yesss! This just took me 10 minutes to figure out. Thank you!
Thank you so so so much! I've just started exploring Webflow and this tutorial was extremely helpful!
Awesome. Even works after 4 yrs
@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.
It's better to hide with -100%, and show at 0. And set the nav to sticky.
Why?
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?
I have the same question.
Just turn off "sticky"
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.
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.
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 🙏
Great video. I want to make this site wide and not have to do this on every page. Have I missed something?
Probably need to make the navbar a symbol and then use that symbol when you make other pages. I believe triggers/animations persist with symbols. I could be wrong though.
Kofi Forson No, You’re correct. That’s the way to do it.
@@joshuabruce351 hi :) i got nto your page: www.madebyidealab.com/ and i love your menu from nav bar..do you know any tutorial where i can find directions to replicate the interaction idea? i want to do the same animation with other size, colors and content (social media icons, etc), by replacing the default menu, webflow offers when dragging the default navbar so that i can make my own. (in fact i'm ok with default navbar..i've already edit it, replaced hamburguer menu for a lottie and even triggered well the menu on time opening and closing it...the thing is the default menu is just not what i want to see :( please help ..i've been using webflow for almost a week ..first time trying a webpage and now i want to upgrade my knowledge and skills but i feel stuck
@@kofiforson1386 Doesn't work
@@j.r.826 doesn't work either. Does anyone has another solution for this?
It works perfectly in desktop, but when it comes to mobile, when I tap the default menu icon in the NavBar, the menu pop-up window does not fully appear. What should I do?
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?
Here is a lesson on how to reuse interactions across multiple pages: university.webflow.com/lesson/reuse-interactions
Hope this helps 😀
I do everything you teach. Why doesn't my result change?
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?
Do I have to create this animation for every page on my site?
Did you figure this out?
Ed Williams the navbar is already a symbol, you still need to do it in every page for some reason. Unless there's another way
If this is the case, and I think you are right from the testing I have been doing, this tutorial doesn't really help unless you only intend to use this on a single page website where there will only be one instance of this animating navbar. Most users will want to use this on sites with more than one page. To add to this, Webflow's Interactions system has changed a bit since the tutorial was published so following it step by step no longer works. I managed to get the Navbar animate off the screen but having it return so far does not work
Webflow folk, please update this tutorial with a method and tutorial that does work as many will want to use it, currently it does not work.
I got it to work - For anybody else wanting to know how to do this you'll need to add a starting point and ending point for both scroll down and scroll up animations. But it still does not if the animated Navbar is converted to a Symbol, the animations are lost.
Hey guys, since this animation plays on page load, you'll need to create the trigger on each page in your project. However, after you create the animations (Navbar enter and Navbar leave) for the first time, you won't need to create them again. All you'll need to do is:
1) Go to each page
2) Add a page load trigger
3) Choose Navbar enter under Scrolled up
4) Choose Navbar leave under scrolled down
Another thing to note here is that if you haven't saved your fixed navbar as a symbol, you'll need to apply the animations to the fixed navbar class so it works on all pages. So, just edit the Navbar leave and Navbar enter animations, select the action and set it to apply to the class like this: cl.ly/3O3X3X1s1s0y
Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! If you're having any trouble implementing this animation, you can always post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.
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??
How does this sort of hiding navigation bar fair when it comes to accessibility?
It doesn't affect accessibility. It's the same type of UX in mobile web browsers. For example, while using the mobile Safari app, the address bar slides away as you scroll down the page but can still be accessed when you scroll back up.
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
You'll need to apply the same interaction on every page in your project. You don't have to rebuild it on each page, just apply it.
Hope this helps 😁
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
Yes, in the animation panel scroll down and unselect "tablet" and "mobile"
For me the scroll up interaction doesn't work either after I set the scroll down one up.
how to do the same for responsive design?
You can apply the same interaction across all breakpoints: university.webflow.com/lesson/triggers-and-animations#trigger-settings
@@Webflow The interaction works well on desktop and preview for mobile. But when I open it on mobile it work only when I'm on the hero section. In trigger settings the trigger for mobile is on. What can be the issue?
Hmmm... That's exactly what I'm doing but it doesn't work. Is there anything that could get in the way of this working?
Hey Sebastian, could you please tell us a bit more about the issue you're having? I highly recommend that you post on the Webflow Community Forum (forum.webflow.com/) with as much information as possible (read-only link (wfl.io/2Tupw47), screenshots and a description of the issue), and our amazing community and staff can help you there.
not working for me either
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?
This might be what you're looking for → university.webflow.com/article/background-image#fixed/scroll
@@Webflow Thanks a lot. Its part of what im looking for. This video show the animation on the nav bar only.My main concern is involving the other elements on the the page like on this template webflow.com/templates/html/uncommon-portfolio-website-template
Random question; but does anyone know how they made the sections scroll over the background image like that?
Ali Attrill thanks! Do you know where id be able to find them?
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...
Figured it out. I have to be inside the symbol to create the animation.
scroll down interaction works perfectly, scroll up doesn't
right!!!
just kidding. I figured it out if you still need help
Does anyone know how to make an animation when scrolling like the one in the picture in the video above? Or what is the name of such an effect? :)
Not sure what you are referring to. Can you please be more specific? Maybe you can give us a timestamp?
@@Webflow 0:20 A photo with a man taking pictures, featuring a red drop with the letter "D" on it :)
Wht software is used
Webflow
Webflow