How can I play and loop a simple Lottie animation in Webflow, with the animation pausing on hover and resuming on mouse out?
TL;DR
- Add a Lottie element with your .json file, set it to autoplay and loop, and assign it a unique class.
- Create a mouse hover interaction to pause the animation on hover and play it on hover out using Webflow's Interactions panel.
To play and loop a Lottie animation in Webflow, and have it pause on hover and resume when the mouse leaves, you’ll need to use Webflow’s Lottie animation element combined with a few custom interaction settings.
1. Add the Lottie Animation Element
- Drag a Lottie element from the Add panel into your canvas.
- Under the Element Settings, upload your .json Lottie animation file.
- Set Playback to Loop and Autoplay.
2. Assign a Unique Class to the Lottie
- Give the Lottie element a class name (e.g.,
lottie-hover-anim). - This allows you to target it in Webflow interactions.
3. Create the Mouse Hover Interaction
- Go to the Interactions panel.
- Under Element Trigger, choose Mouse Hover while selecting the Lottie element.
- Choose On Hover → select Pause Lottie animation.
- Target that specific Lottie element.
- Then choose On Hover Out → Play Lottie animation.
- Again, target the same Lottie element.
4. Adjust Playback Behavior (Optional)
- By default, “Play Lottie animation” resumes where it paused.
- If needed, change playback settings to start from a specific frame or playback speed using the advanced options in Webflow interactions.
Summary
Use Webflow's Lottie element set to loop and autoplay, then apply a Mouse Hover interaction to pause on hover and resume on hover out. This setup requires no code and works directly within Webflow's Designer and Interactions tools.