Lottie Interactivity - how to sync to cursor while keeping the button pressed? (solved)

Hi there.

I got a Lottie-animation that is linked to the horizontal cursor position. So far that’s easily done using the Lottie Interactivity library. But now I want the animation to be synced to a dragging gesture, meaning I click and hold and while holding the animation changes depending on the cursors x-position.

That library offers a lot of options on how to interact with animations, but it doesn’t seem to feature something as described. So I assume the only option is to create that functionality manually? I guess I just watch for clicks on that object, and until I get a release I follow the cursor position, and match that to the frames in that animation?

Thanks for any advice

Edit: I now wrote a custom function for that, which takes the x-position of the cursor on drag start, measures the distance dragged, turns that into a percentage of the screen width, and converted that into a percentage of animation that needs to be played (if that is of help to anyone in the same situation)

1 Like

Hey @azaca so it worked out? I know some of us would love to see the custom function and I would love to see the animation in context.