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?