Webflow sync, pageviews & more.
NEW

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

TL;DR
  • Drag in a Lottie element, upload your .json, set playback to "On Hover (Interaction)", direction to "Forward", and turn off loop.
  • Add a Hover In interaction on the parent element to play the Lottie from start to end, and leave Hover Out empty to stop at the final frame.

To play a Lottie animation on hover and stop at the last frame in Webflow, you need to use Webflow’s native Lottie element with a few specific settings and interactions.

1. Add and Configure the Lottie Animation

  • Drag a Lottie element into your desired section or container.
  • Upload your .json Lottie file or paste the URL if it's hosted externally.
  • In the Lottie settings panel, under "Playback", select "On Hover (Interaction)" — not Continuous or Scroll.
  • Set Direction: "Forward"
  • Set Loop: Off (unchecked)

2. Set the Lottie Animation to Play on Hover

  • Select the parent element (e.g., a Div block around the Lottie animation), not the Lottie itself.
  • Go to Interactions → Element Trigger → Mouse Hover → Hover In / Hover Out.
  • For Hover In:
  • Add an action: Lottie → Play
  • Target: the Lottie animation inside
  • Set Start Frame to 0 and End Frame to 100%
  • Easing: Linear, Duration: Set based on your animation needs
  • For Hover Out:
  • Do nothing — this ensures the animation doesn't rewind or reverse

3. Ensure It Stops at the Last Frame

  • Since you're using Play from start to end without enabling Loop, the animation will automatically stop at the final frame when it completes.
  • That final frame remains visible until something else changes the animation state.

Summary

To trigger a Lottie animation on hover and stop at the final frame in Webflow: use the Lottie element with On Hover (Interaction) playback, set a Hover In interaction to play it, and leave Hover Out blank. This ensures it plays once and ends on its last frame.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I create an initial scroll to activate an anchor point to a second section of a page in Webflow?
Is it possible to stretch a single column and row across multiple using the multiple image block on a CMS page in Webflow, similar to having a longer image in the middle of the grid?
Is there a way to reverse the order of grid items for tablet and mobile devices in Webflow?
How can I edit the text content in a dropdown menu in Webflow?
How can I fix the issue with form submission and data capture on a Webflow site when using OTP verification through WhatsApp?
How can I trigger Webflow animations through code?
How can I create a diagonal section in Webflow?
What should I do to activate the option to change to the Basic Plan in Webflow, if the button is currently disabled and says "No CMS support"?
How can I add requirement tags to a job board created in Webflow using CMS Collections and linking them to the main CMS Collection for jobs?
Why aren't the individual project pages of my furniture business showing up on Google search results, even though I have updated the meta descriptions and titles on my Webflow site?
How can I insert a radio button into the text label in Webflow? I can't get it to look like the picture. Here is my site Read-Only: [LINK](LINK)
How can I pass URL parameters to a redirect URL in Webflow? I need to be able to do this on any link on the page, and also include form dropdown selections.
Can I integrate a different checkout payment service with Webflow Ecommerce using an API or custom code?
What are some alternative options to Adobe Muse for users who are searching for a code-free web design solution after Adobe's announcement?
How do I limit a paragraph in Webflow to two lines followed by three dots or an ellipsis, with a line height of 16px?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?