"While Scrolling In View" animation triggers way beforehand


So I set a “While Scrolling in View” animation to a section of my page, where I want the Nav bar to change color.

I’ve set this animation on other pages, and its worked perfectly fine - as soon as my navbar enters that section, it changes color, and as soon as it leaves the section, it reverts to the original color.

But the issue i’m facing is now on my homepage. Although I set it for a section under my landing page, the navbar’s color changed in the start itself (at the top of the screen). But when I scroll down to that section and scroll further down past the section, it promptly reverts back to the color. Essentially, it works perfectly at the 100% end of the animation, but not at the 0% beginning.

I’ve attached a video for your reference: Video

I found a post where @McGuire suggested use of “Scroll Into View”, but that does not give me the flexibility to choose the exact point where the color of the nav bar changes.

Any help is appreciated!

Thank you!

Here is my public share link: Link

Any update on this? :frowning: