The hero section opens with a full screen lottie animation.
The problem: The user scrolls past the animation before it has reached its end. Example
Desired outcome: The user has to finish scrolling through the entire animation and only then we continue to the rest of the page.
What I’ve tried:
Sticky layout on the animation. No matter the values I set, nothing changes.
I have set the animation to ‘fixed’. This works but the rest of the page scrolls over (on top) the animation instead of the animation also being scrolled out of view. Example
Lots of experimentation with different settings to the animation and parent elements, but to no avail.
I’d greatly appreciate any help or advice on this!
Here is my public share link: Webflow - BloemenDeVierSeizoenen