Streaming live at 10am (PST)

How to temporarily fix a lottie animation?

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

There are four things you’ll want to tweak here to get this working as expected:

  • The containing section (Section Gradient-Hero) will act as the “track” for your sticky element, so make this 200vh—or the length you want it to scroll before scrolling as normal—and set the flex align to “Start” (the top):

  • The Hero-wrapper-BG div will act as the group of elements that will “stick” throughout the track you setup in the first step, so make its width 100% (not 100VW), its height 100VH and change its position to Sticky with a top of 0:

  • Your gradient element (Gradient-Overlay) will need to sit on top of the entire Lottie animation, so change its position to Absolute and its width and height to 100%:

  • Finally the Lottie animation element (Lottie Animation) just needs to take up 100% of the containing element (Hero-wrapper-BG) so the only styles we’ll need here are a width and height of 100%:

To make sure your animation plays to the end within the appropriate track length, either edit the height of the section (this will affect how long someone needs to scroll before getting to the lower content) or just tweak the interaction to end a bit sooner (I found that 20% stops almost exactly when the “track” ends, but feel free to tweak this if you’d like):

That’s it! Feel free to let me know if you run into any issues but that should work how (I’d hope) you intended it to :+1:

This is it! You are absolutely amazing and you made my day! Thank you so much! You explained it in a way that was clear and easy to understand! Followed your steps to the letter! Great job and thanks again for taking your time with this!