Navbar background on scroll

Hi all,
I’d like to create a navbar scroll interaction like the one on this site dubsbarbell.com but need a breakdown of the steps to do this. Any assistance is greatly appreciated, thanks!

Hi @kharris2,

That’s pretty easy to do on Webflow! Go to the interactions panel (hotkey: H) at the very top right corner of your designer. Create a “Page Trigger” interaction by clicking on the plus button, and select “While page is scrolling”. Now in the “Action” dropdown, select “Play Scroll Animation”, and then again on the plus icon to create a new scroll animation from scratch.

Now select your header, give it an initial background color of transparent and at 5%, change the background color to whatever you like. You can live preview it to see how it looks. Let me know if you need screenshots.

Cheers

Wow that was way easy! Thanks! How would I then make it ease into having a background color as it is currently jumping immediately from transparent to color?

Would you be able to share your website’s preview link so I can see what’s going wrong? Probably a very quick fix.

Absolutely
https://preview.webflow.com/preview/kelsis-redesign-project?utm_medium=preview_link&utm_source=designer&utm_content=kelsis-redesign-project&preview=13c8fbb32fc91daaca96c685ac9afb9e&mode=preview

You’re doing it right. Just that the overall height of that page is very little and 0% to 25% isn’t a lot of distance. You cover about 50% of the page in one scroll, and that is probably why it appears instant. Try increasing the 25% to 60% and it should happen slowly and smoothly. You should play with that % as the overall height of your page increases.

Wow it looks great now, thanks so much :nerd_face: