Making a sticky nav bar transition smooth and not instant

Design help Animations & Interactions
1

Hey All,

So I have a sticky nav bar via a “while page is scrolling” animation. It looks exactly how I want it but I would like to smoothen things up a bit rather than have it just appear as white the moment you scroll down.

And no, I am not looking for it to get more white the further you scroll, what I need is this:

  • The moment a user scrolls, it triggers an opacity interaction of some sort.
    This site does it well https://acumen.org/

Any thoughts?

Here is my public share link: https://adams-apples-foundation.webflow.io/
https://preview.webflow.com/preview/adams-apples-foundation?utm_medium=preview_link&utm_source=designer&utm_content=adams-apples-foundation&preview=d6d3809e5d2b9244469bffc21addff28&mode=preview

2

Look into using the “scroll into view” element trigger instead of the “while page is scrolling” page trigger. I’ve typically attached the animation to the hero element (when it scrolls out of view you show the opaque nav, and show the transparent nav when it scrolls into view) - just play around with the offset so once you start scrolling it triggers and once you’re about at the top is reverts.

Just holler if you can’t get it working and I’ll walk through the process with a screen recording.