Streaming live at 10am (PST)

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


#1

Hi there,

Regarding this tutorial on Youtube, Show & Hide Navbar on Scroll - Webflow interactions and animations tutorial https://www.youtube.com/watch?v=a2Kp4bSDCwI It does not work with the current version of Webflow.

I have tried following it step by step but Webflow’s Interactions system has changed a bit since the tutorial was published so it no longer works. I managed to get the Navbar to animate off the screen but having it return so far does not work, please update this tutorial with a method and tutorial that does work as many will want to use it, currently it does not.

Please can you tell me how to get the Navbar to animate back to the on screen position. You can see my setup in the link to my shared site below.

Regards
Grant

Here is my site Read-Only: https://preview.webflow.com/preview/parallax-testing-fccb06?preview=f8801620a39a078b34f7be8c005d7cd6

(how to share your site Read-Only link)


#2

Hi Webflow,

I have managed to get this working but have had to improvise, each interaction (scroll down, scroll up) has a start and end animation state. So again, the Youtube video needs to be updated.

However, the problem now is that the animations do not stay with the Navbar if I want to use the Nvbar across the site as a Symbol. This really needs to be addressed for the obvious reasons.


#3

Hi @grantsenior

I made a quick video to help explain a few things: https://cl.ly/3D3L2A191S2L

Here is some more info about class based interactions: https://university.webflow.com/article/reusing-interactions


#4

Hi Brando,

Thanks for your reply and video, most helpful, appreciate it! I’ll study your video and see if I can get it working.

Just a small point, it’s pretty hard to hear what you’re saying in the video. It would be super helpful to others if you could do it again, slow it all down a bit to make it clearer and upload to Youtube. I’m sure the community would be most grateful considering the only videos I’ve seen addressing this Navbar action uses a legacy Webflow approach.

Cheers again!
Grant


#5

Hi Grant,

Apologies for the background noise in that video.

Please let me know if you’d like clarification on anything specific there and I’m happy to provide more information. :bowing_man: