Experimenting with Lottie as a more interactive alternative to animated webp and gifs. Wondering if there is a way to return a Lottie back to it’s normal running state after an interaction? Tried to set it in combination via a page load interaction, but that seemed to override the mouse-move-over-element interaction.
What I’m trying to achieve:
- page load > lottie runs in loop
- user runs mouse over lottie > lottie run is dictated by mouse-move-over-element animation
- user mouse exits hovering over lottie > lottie returns back to loop
Only way I was able to accomplish this was creating two Lottie animations, one that would run normally, but then hide on hover, and then reveal the lottie that has the mouse-move-over-element interaction. But I know the extra file load is not ideal for page speed.
Cheers webflowers! ✿
Here is my public share link: Webflow - Lottie vs Gif vs Webp