Animation Hoover on a specific time

[Brianmills077]

Hello,

It is possible to pause the animation only at specific time/position when you hover over it?

[Brianmills077]

var params = { container: document.getElementById('lottie'), renderer: 'html', loop: true, autoplay: true, animationData: animationData };

var anim;

anim = lottie.loadAnimation(params);

[bodymovin]

Hi, can you elaborate some more on what you want to achieve?

[Brianmills077]

Hello,

Thank you for your reply. I have a product carousel and each product is in the middle for one second. (https://www.avasam.com/dropship-furniture/) What I want to achieve are the following things:

1. When you hover on the animation, the animation pauses but only when a product has reached the front position. Example: I hover on the animation, but the product is still not in the middle yet. What happens is the animation keeps going until the product reaches the middle position and then it pauses completely. But the pause sequence is initiated by the hover. Many thanks.

[bodymovin]

You can keep a reference to the frames where the animation stops and then use the enterFrame event to check when it reaches those specific frames.

[Brianmills077]

Could you please help me with the and also with the hover effect?

[bodymovin]

if you have an implementation, I can take a look and see where you get stuck.

[Brianmills077]

Kindly take a look at this animation (https://www.avasam.com/dropship-furniture/) The idea is to have a pause effect on hover, but only when one product is in front. So based on the animation progress, the hover effect will be previewed in 2 different ways. Case 1: The product is in front: the animation will just pause. Case 2: The product is still advancing to the front: the animation will speed up until the product gets in front and then pause.

I have implemented the hover effect, but it only pauses the animation. I want to add a function that will pause only when the product is in front. Here is the code: var params = { container: document.getElementById('lottie'), renderer: 'html', loop: true, autoplay: true, animationData: animationData }; var loader=document.getElementById("lottie"); var anim;anim=lottie.loadAnimation(params);loader.addEventListener("mouseenter",function() {;anim.pause();}); loader.addEventListener("mouseleave",function() { anim.play();});

Could you kindly advise me on how I could implement this idea?

[bodymovin]

You probably want to keep track of the currentFrame property of the animation. so, on the mouseenter event, check anim.currentFrame, and depending on the frame, you can decide what to do.