search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
29.85k stars 2.85k forks source link

Can't create loop animation with hover effect #2953

Open sergiuszmoroz opened 1 year ago

sergiuszmoroz commented 1 year ago

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

This is how should it works: 1/2 part of animation must be on loop by default 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 video below, to show how it should works. https://sergiuszmoroz.pl/sharing/lottie-anim.mp4

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.

Can someone help me here, please?

Thanks in advance!! ❤️❤️

sergiuszmoroz commented 1 year ago

In hope that someone answer :pray:

JacquesYW commented 1 year ago

https://lottiefiles.github.io/lottie-docs/advanced_interactions/#lottie-button-example I thought it might be useful for you