Navbar animation help

Hello, I need some help.

How to make the fading animation for navbar on this website:

I like how it’s first transparent and when starting to scroll changes the background and the link text colour.

Also, maybe can someone tell for the smooth scrolling?

Thank you :slight_smile:

I have something similar.

4 Steps.

  1. Set the navbar with appropriate elements- the master block that contains all the elements, you want to set that BG color to the color you want it to be (for visual editing purposes.)
  2. Go to the interactions section of the designer (top right), add a trigger element for page scroll, and start a new animation for when somebody scrolls the page.
  3. Set the animation for the BG (BACKGROUND) COLOR to be transparent in the beginning and to fade into the COLOR YOU WANT when you scroll to a certain point & past it. (5%, 10%, etc. 3% is what I use, I believe.)
  4. When you’ve set it, go back to where you created the animation and set the smoothing to a solid 75%-80%

Test and fiddle with it until you get it right.

1 Like

Hello @Lifestyledq thank you for the answer.
I managed to do the fading effect with smoothing.
But when I set the animation from opacity to full bg colour it affects everything in the navbar.
Having that kind of navbar is cool, this is just practice for me in the Webflow and I am determined to learn how to make it :slight_smile:

Any more ideas? :slight_smile:

That same element, for the width, type in 95% (so that it’s 95% of whatever element it sits inside of, so the entire page.)

Then for the top MARGIN, add like 10-20px. That’s all you need to do.

Make sure you also set the side margins to ‘auto’
click on the box at the top right with two little triangles, in the ‘spacing’ tab at the RIGHT side of the designer.

1 Like

Hello @Lifestyledq

I know how to make the navbar and I did make it, it was easy I just want that effect when u start scrolling to make from transparent colour to full white with different font colours when you start scrolling :slight_smile:

image

This is the most thorough method of producing that effect.