How can I prevent Lottie animations from playing on webpage load in Webflow and only initiate when they scroll into view?
TL;DR
- Disable "Autoplay" in the Lottie element settings.
- Create a "While scrolling into view" interaction that triggers the Lottie animation to play.
To stop Lottie animations from auto-playing on page load and only start them when scrolled into view, you need to disable autoplay and set up an interaction.
1. Disable Autoplay in the Lottie Element
- Select the Lottie animation element in the Webflow Designer.
- In the Element Settings panel (gear icon), uncheck "Autoplay". This stops the animation from playing when the page loads.
2. Create a Scroll Into View Interaction
- Go to the Interactions panel (lightning bolt icon).
- Click + Element Trigger and choose "While scrolling into view".
- Choose the Lottie animation element as the target.
- Under the scroll animation options, choose Scroll In.
- Click "Start an Animation" and then + New Timed Animation.
- Add a new action:
- Click + and choose Lottie.
- Set Lottie Action to Play.
- Duration is usually not required (the animation will play at its own speed).
- Optionally, add a Scroll Out interaction to stop or reset the animation.
3. Optional: Adjust Visibility or Reset
- For better control, you can:
- Add a Scroll Out animation to set the Lottie progress to 0%.
- Combine with opacity or display changes if needed for performance or user experience.
Summary
To make a Lottie animation play only when it scrolls into view in Webflow, disable "Autoplay" in the element settings and use a scroll-in view interaction that triggers the animation.