How can I make Lottie animations play on hover and stop at the last frame in Webflow?

To make a Lottie animation play on hover and stop at the last frame in Webflow, you'll need to set up an interaction using Webflow’s native Lottie and Interactions system.

​

1. Add the Lottie Animation to Your Page  

• Drag a Lottie element from the Add panel into your layout.
• In the Element Settings panel, upload your JSON animation file.
• Set Animation playback to "On scroll" (you’ll override this with interactions).

​

2. Prepare the Lottie for Manual Control  

• Select the Lottie element and ensure Loop is turned off and Autoplay is disabled.
• Name the Lottie element something descriptive (e.g., "Hover Lottie") for easy reference in interactions.

​

3. Create a Hover Interaction  

• Go to the Interactions panel (lightning bolt icon).
• Select the parent element you want users to hover over (e.g., a div block containing the Lottie).
• Click + next to Mouse Hover (Hover In).

​

4. Set the Lottie to Play on Hover In  

• Inside the hover interaction, click + Add Action > Lottie.
• Choose the Lottie element.
• Set animation type to Play.
• Set Start frame: 0, and End frame: 100% (or the exact last frame number if known).
• Uncheck Loop to prevent it from restarting.

​

5. Ensure It Stays at the Last Frame on Hover Out  

• Add a Hover Out trigger.
• Under Hover Out, do not reset or reverse the Lottie animation. Leave this interaction empty.
• This allows the Lottie to remain at the last frame after hovering ends.

​

Optional: Use a Wrapper for Hover  

• If the Lottie is small or not easy to trigger hover directly on it, wrap the Lottie in a div block and apply the hover interaction to that wrapper instead.

​

Summary  

Upload your Lottie file, disable autoplay/loop, and use a Mouse Hover interaction to play the animation from start to end when hovered. Leave the Hover Out empty so the animation stops at the last frame.