Streaming live at 10am (PST)

Trouble with animating my navbar

What’s popping designers!! Okay so I’m practicing my webflow skills by copying a website, but I’m hung up and need help. When I try to add the page scrolled interaction to my navbar, it doesn’t want to animate and I tried other elements just to test and nothing is working. Here is the link to the website I’m copying from [https://avenuehq.com/], so you can see the nav animation when you scroll down the navbar will slide up a bit to hide the info above the navbar.


Here is my public share link: https://preview.webflow.com/preview/remake-c9a485?utm_medium=preview_link&utm_source=designer&utm_content=remake-c9a485&preview=adc4cba63a2a2040218dcd614253b977&mode=preview

Hi,

You can do this by following these steps:

  1. Add a new ‘while page is scrolling’ interaction
  2. Chose ‘nav-links-animation’
  3. Remove all the existing animations in the frame.
  4. Setting up so that the nav bar is at 0px when the keyframe is 0% and at -40px when the keyframe is 5%.
1 Like

Thanks for the reply @JSW, I tweaked it a lil bit to mimic more of the original site. Thanks for leading me on this one still sorta still fresh on actually building these sites!:smiley:

1 Like