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
  • Upload Lottie JSON to the Assets panel in Webflow and drag it to the Designer canvas.
  • Set Lottie animation to loop and autoplay in the Element Settings.
  • Create a Mouse Hover Animation in the Interactions panel to pause the animation on hover and resume it on mouse out.
  • Test the animation to ensure it pauses and resumes correctly.

To implement a Lottie animation in Webflow that loops and pauses on hover, follow these steps.

​

1. Upload and Embed the Lottie Animation

  • Go to the Assets panel in Webflow.
  • Upload your Lottie JSON file by clicking on the Upload button.
  • Drag the Lottie file from the Assets panel onto the Designer canvas.

​

2. Configure the Lottie Animation Settings

  • Select the Lottie animation element on your page.
  • In the Element Settings panel (cog icon), ensure the following:
  • Play Mode is set to Loop to enable continuous playback.
  • Autoplay is checked to start the animation automatically.

​

3. Create an Interaction for Hover Effect

  • Navigate to the Interactions panel (lightning bolt icon).
  • Create a new Mouse Hover Animation:
  • Select your Lottie animation as the trigger element.
  • Choose On Hover as the trigger type.
  • Set up the hover interaction:
  • Add a Lottie action loading within the interaction.
  • Set the Lottie action to pause at the current frame on hover.

​

4. Resume Animation on Mouse Out

  • Within the same interaction:
  • Create a Mouse Out Animation:
    • Select the Lottie animation as the trigger element.
    • Set the Lottie action to resume playback from the current frame.

​

5. Finalize and Test

  • Preview your site to test the animation.
  • Ensure that the animation pauses on hover and resumes on mouse out without any issues.

​

Summary

By following these steps, you can successfully implement a Lottie animation in Webflow that plays in a loop, pauses on hover, and resumes on mouse out. Ensure all settings and interactions are configured in the Designer for seamless playback.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can Webflow users set up paginated collections using the jquery-pjax library to create a smoother browsing experience?
How can I track a form's source in Webflow using hidden fields?
How can I create a customizable slider with a custom slider navigation, allowing users to switch slides by hovering over the buttons in Webflow?
What workaround or code can be used to fix the bug on Safari in Webflow?
How can I create additional sections with different background colors using Webflow, without altering the original sections?
How can I make the videos on my Webflow online store automatically download instead of opening in an in-browser video player when the user clicks on the download button on the order confirmation page?
How can I integrate custom code (such as JavaScript) into Webflow to allow users to copy and paste HTML and CSS from a resume they like on my website into their own Webflow account, similar to how Flowbase does it?
How can I create a sticky navigation bar in Webflow with a see-through background that changes text color based on the section in view?
How can I track the number of people who click the "Book A Free Consultation" button on my Webflow site and are redirected to a separate website for scheduling appointments?
How can I prevent products from appearing as sold out until the purchase is complete on my Webflow site?
Can Webflow filter a collection list on a collection page using a value from a record in the collection?
How can I adjust the left margin of a header container in Webflow when the container margins are locked to keep it responsive?
How can I create a looping animation in Webflow that starts on page load and repeats infinitely?
How can I make a button in Webflow append the URL and scroll down the page upon clicking?
How can I change the dropdown menu in Webflow?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
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?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?