Controlling Lottie Animations inside Framer to

1

Hi you all, :wave:

I have a Lottie animation that starts on hover, and I want it to reverse the animation when the mouse leaves. I noticed that the controls are limited inside Framer to do this (maybe I missed something).

Screenshot 2024-12-15 at 09.29.25
Screenshot 2024-12-15 at 09.29.25510×910 40.1 KB

How can I apply a reverse on mouse-leave effect to a Lottie animation inside Framer?

Workarounds, tips, and tricks are welcome! :smile:

3

Hello,

In some cases, you may find it possible to trigger a reverse animation by relying on Framer’s built-in interactions and behaviors, although the options might be limited when it comes to reversing an animation smoothly.

You can try with

Use Framer’s hover trigger to start the animation, then manually set a reverse action or stop action in the hover-out settings, but this might not be as flexible as using a custom override.

4

Hello,
To achieve this effect, you can use JavaScript to control the Lottie animation. Here’s a brief code snippet to help: NCEdCloud Org

javascript

var animation = lottie.loadAnimation({
  container: document.getElementById('yourAnimationContainer'), // the dom element
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'data.json' // the path to the animation file
});

document.getElementById('yourAnimationContainer').addEventListener('mouseenter', function() {
  animation.setDirection(1);
  animation.play();
});

document.getElementById('yourAnimationContainer').addEventListener('mouseleave', function() {
  animation.setDirection(-1);
  animation.play();
});

Make sure to replace 'yourAnimationContainer' with your actual container’s ID and 'data.json' with the path to your Lottie animation file.

Best regards,
Retefo Henry