Pause lottie animation on hover

Design help General
1

I have a simple Lottie animation that I want to play and loop. While hovering, I want the animation to pause, then start again on mouse out.
It would be nice to have the animation ease on the stop + start, but not necessary.

Alternatively, I’ve also tried the blob animation from here as an embedded code block. But I’m still not sure how I can get the pause on hover effect.

Thank you!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Looks like this cannot be done using the webflow’s native lottie tools. The animations you add using Add > Media > Lottie Animation get rendered in an SVG element inside a div.

To control playback, we need a lottie-player element.

Use an HTML Embed to insert a lottie-player like so:

<lottie-player
  autoplay
  loop
  mode="normal"
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style="width: 320px"
>
</lottie-player>
<script src="https://unpkg.com/@lottiefiles/lottie-player@1.5.7/dist/lottie-player.js"></script>

Replace the URL in the src attribute with your lottie asset’s link.

Then you can set up the pause-on-hover interaction by adding this script:

<script>

  var lottiePlayer = document.getElementsByTagName("lottie-player");
  var hoverTrigger = document.getElementById("lottie-controller");
  
  lottie-controller.addEventListener('mouseover', function(event) {
    lottiePlayer[0].pause();
  });
  
  lottie-controller.addEventListener('mouseout', function(event) {
    lottiePlayer[0].play();
  });

</script>

This uses a separate element (lottie-controller) as trigger for pausing and playing the animation. I tried using the lottie player itself, but that didn’t work for some reason. You can simply adjust the styling of the trigger element to be positioned absolute on top of the lottie player if you need the player to trigger pause and play.

1 Like