How to create loop with hover effect?

Lottie in Web
1

Hi!
I want to add interactive animation on my site:

  1. 1/2 part of animation must be on loop by default
  2. 2/2 part of animation is for hover interaction: on hover plays forward to the last frame and stops, when cursor takes away, animation plays backward and returns to loop.

I made simple animation below, to show how it should works.

I’m really beginner here, I know how to make basic interactive animations like loop or hover, but I can’t merge this interactions in code.

My code looks like this:

LottieInteractivity.create({
    player:'#uxDesign',
    mode:"chain",
    actions: [
        {
            state: 'loop',
            transition: 'hover',
            frames: '0, 249'
        },
        {
            state: 'none',
            transition: 'hold',
            frames: '250, 369'
        }

    ]
});

I guess mode “chain” here is wrong.
Can someone help me here, please?

Thanks in advance!!

2

In hope that someone answer :pray: