I am rebuilding a website in WF that I had previously built on another platform.
I am trying to get the pinned navbar to have a clear background (with visible text) at the top of the page but then transition to a colored background when the page is scrolled down.
On the contrary, I would like for the navbar to keep the colored background throught the entire page transition until it returns to the top of the page again where the background becomes clear.
I have found help regarding this throughout the forum, however, the threads seem to be somewhat dated and before the newest animation updates so I am not sure if there may be a better way.
Any help would be greatly appreciated! Thanks!
Here is what I am trying to achieve:
Here is my live link:
Here is my site Read-Only: https://preview.webflow.com/preview/dubsbarbell?utm_medium=preview_link&utm_source=dashboard&utm_content=dubsbarbell&preview=51279f844dc5e22ada1daa899b5b851b&mode=preview
I made a video and uploaded it on youtube to help you out with the interaction that you’re trying to achieve, please check it out - https://www.youtube.com/watch?v=l2ucGgmGKbM
- Set the top section as the trigger for ‘Scroll into view’ animation.
- Start a new animation for when top section is scrolled into view, name it navbar-transparent. This is because we want the navbar to be transparent on the top section.
- Select the navbar and add an action to make the BG Color transparent.
- Close the timeline, and set the offset to 75%
- Start a new animation for when top section is scrolled out of view, name it navbar-opaque (Obvious reason to name it that)
- Select the navbar and add an action to make the BG color to whatever color you want the navbar to have.
- Close the timeline, and set the offset to 75%, just like the last time
Watch the magic happen
P.S. You can play with the offset values to get the desired results
@Keshav_Sharma On behalf of myself and many others, I’m sure, THANK YOU!!! Great explanative video!