Navbar visible after hero

Design help Animations & Interactions
1

Hi all,

I followed the following interaction video to display the menu bar after scrolling past the hero header:
https://interactions.webflow.com/fade-in-navbar-video
It all works, except when you scroll slow past the last ±90 pixels of the hero. Then the website flickers up and down, like the menu/navbar wants to show but does not pop up right.

Could you have a look what I’ve done wrong?
I can’t seem to find this interaction in interaction 2.0 only in legacy interactions.

Thanks!

Here is my public share link: https://preview.webflow.com/preview/groen-aan-zee-af90c8?utm_medium=preview_link&utm_source=designer&utm_content=groen-aan-zee-af90c8&preview=14f9ca476b9688c6e3d9301b449fa68a&mode=preview
([how to access public share link][2])

2

You’re currently using legacy animations to make that animation happen. Disable it and create a new one using the new interactions panel. That is a fast fix and it’s going to be better in the future

3

Hi Jeandcc, yes I would like the new interactions panel too but I can’t find out how I can create this specific usecase. And can’t find a tutorial for it, only making it visible when scrolling. I want it to be visible after the header and then visible all the time.

Thx!

4

image
image1366×768 366 KB

image
image1366×768 389 KB

image
image1366×768 438 KB

image
image1366×768 347 KB

image
image1366×768 440 KB

5

Let me know if pictures are enough

Remember to disable all legacy interactions that might interfere

6

Thanks!
Last thing: how do I create those timed actions for Navigation Show and Navigation Hide. I need to create a new element or page trigger? But it is not “on hide” for example, so what option do I need to choose?

7

As this question relates to how to use the animations panel, I’ll direct you to the Webflow University. They have well-documented articles that will help you using the new interactions panel.