While Scrolling In View jumping to 100%

Here’s my share link.

The goal is to have the background image replace itself by blurring/fading out the previous image and un-blurring/fading in the next image.

Right now, I have the animation trigger set as an invisible div block (Animation-Trigger) that spans the entire height of the page (set to 100%), so to me this should mean “based on the scroll location of this div block, animations happen”. I think, however, what is happening is that 100% doesn’t mean 100% of the content, it is acting like 100vh, so the scroll immediately jumps from 0% to 100%.

I previously had the trigger set to the second video element, which did kind of work, but gave me a pretty short scroll distance which caused the second rotating background image to just become lost entirely.

Hopefully this makes sense. Appreciate any advice on this. Thanks!

This has been solved – a simple hierarchy issue was preventing my scroll effect from working.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.