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
Webflow & Javascript: How can I hide search result items with a blank page in Webflow that contain "/sku/" in the URL using Javascript?
How can I make an element change color simultaneously in Webflow using a scroll into view interaction? Currently, the element only changes color when scrolling down and not when scrolling up.
What are some options for dealing with Webflow's page limitation of only 100 pages, especially when compared to competitors who offer 500 pages, without having to switch to a different CMS?
How can I make a lightbox link play a video immediately after being clicked in Webflow, without displaying the second play button from the embedded Vimeo video?
How can we style the dropdown field in Webflow forms?
Where is the data of my website stored with Webflow hosting in relation to EU data protection laws, and can I use Webflow in the Netherlands without violating these rules?
How can I combine the animated JS number counter with scroll animation on Webflow and ensure it only animates when the section is in view?
How can I link my latest work section on the homepage to CMS pages in Webflow?
Does Webflow provide green hosting options to reduce CO2 emissions for websites?
How can I add the scroll bounce effect to my Webflow website?
How can I make my Webflow modal scrollable on small screens without affecting the scrollability of the content behind it?
How can I resolve the "page with redirect" error and eliminate alternative versions of my homepage URL in Google Search Console for my Webflow website?
How can I resolve the issue of copied Quick Stack elements overlapping on mobile in Webflow?
What are the steps to host a site on a domain hosted via Google Domains, considering that Google Domains is not available in Germany and the domain is hosted on enom?
Can Webflow combine static and dynamic text in a text block or a rich text field?
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?