Loop animation, play an animation and stop on hover, then reverse when mouse out?

Lottie in Web
1

Hi there,

I’m trying to use LottieInteractivity to do something that seems like it should be basic. I want an animation to loop by default, and then another animation to play once and stop while mouseOver, and then go back to looping on mouseOut.

I’ve been doing this:

LottieInteractivity.create({
    player: '#clickPlayer',
    mode: 'chain',
    actions: [
      {
          forceFlag: false,
          transition: 'hover',
          state: 'loop',
      },
      {
      
path: 'https://lottie.host/bb626de0-b047-493a-af74-79cb2aebbf9f/WydCYb53KJ.json',
reset: "true",
state: "none",
transition: 'hold',
      }
    ]
  });

But it’s just not working the way I want it to. Can anyone point me in the right way for this?

2

Hello,
You are on the right track, but there might be a small adjustment needed.
LottieInteractivity.create({
player: ‘#clickPlayer’,
mode: ‘cursor’,
actions: [
{
type: ‘loop’,
frames: [0, 100], // Adjust the frame range for your looping animation
},
{
type: ‘hover’,
frames: [101, 200], // Adjust the frame range for your hover animation
state: ‘playOnce’,
transition: ‘onMouseEnter’,
},
{
type: ‘hover’,
frames: [0, 100], // Return to the looping animation on mouse leave
state: ‘loop’,
transition: ‘onMouseLeave’,
}
]
});
Make sure to adjust the frame ranges [0, 100] and [101, 200] to match the specific frames of your animations. This setup should loop the default animation and switch to the hover animation when the mouse is over the player, then return to the loop when the mouse leaves.

Best Regard,
Redhumana com

4

This topic was automatically opened after 30 hours.

5

To achieve the behavior where an animation loops by default and plays once on hover, use LottieInteractivity like this: set transition: ‘scroll’ with state: ‘loop’ for the default looping animation, and then add a second action with transition: ‘hover’ and state: ‘none’ to play the animation once when the mouse is over the element. Include the path to the alternate animation and set reset: true to ensure it reverts back to the looping animation when the mouse leaves. This will ensure the animation loops until the user hovers, at which point it plays once, then loops again Check Lesco Bill when the mouse is no longer over the element.

6

Thanks for sharing the proper answer.
Best Regards
fafsa code