How can I ensure that a Lottie animation remains in place on a webpage while the content beneath it scrolls and only ends after a certain duration or number of pixels, without constantly adjusting the timing in Webflow's scroll effects?
TL;DR
- Wrap the Lottie animation in a sticky
divand place it inside a tall parent section to control scroll duration. - Use Webflow’s “While scrolling in view” interaction to map scroll progress to the Lottie animation frames without manual timing.
To keep a Lottie animation fixed while users scroll past it, and then have it end after a set scroll distance without manually syncing timing, you can use a combination of Webflow’s position: sticky and while scrolling in view animation triggers.
1. Place the Lottie in a Sticky Container
- Wrap the Lottie animation inside a
divand give it a class (e.g.,lottie-sticky-wrapper). - Set this wrapper's position to “sticky” and apply a top offset (e.g.,
top: 0px) so it starts becoming sticky when reaching the top of the viewport.
2. Create a Scrolling Section
- Place the sticky wrapper inside a tall parent section (e.g.,
lottie-section) to control how long the animation stays in view. - Give the parent section enough height (e.g., 2000px) to determine the scroll duration.
- The length of this section defines how long the Lottie appears to stay fixed as the page scrolls.
3. Animate on Scroll with “While Scrolling in View”
- Select the Lottie element inside the sticky wrapper.
- Add a “While scrolling in view” interaction in Webflow.
- Assign a Lottie scroll animation to play based on Scroll Progress.
- Webflow will automatically map scroll distance over the parent section to the Lottie frames.
4. Optimize Lottie Settings
- Ensure the Lottie animation is set to “Do not autoplay” and “Render: SVG” (or Canvas for better performance).
- In the Interactions Panel, adjust the scroll-animation to run between scroll 0% → 100%.
5. Test and Adjust Section Height, Not Scroll Timing
- To control how long the animation lasts during scroll, change only the height of the lottie-section, not keyframes or scroll percentages.
- This keeps the Lottie animation duration tied to a concrete scroll pixel range and removes the need for constant timing adjustments.
Summary
Wrap the Lottie file in a sticky wrapper inside a tall parent section, use “While scrolling in view” interactions to scroll-scrub the animation, and adjust section height, not timing, to control how long it animates as you scroll.