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!