Lottie playback

Design help Animations & Interactions
1

hey! so i use lottie a lot out side of webflow and got the notification about lottie integration the other day, i’ve made this crude mockup of a potential button and i am wondering how far you can push this new integration, if you look at the link below you will see it will play the lottie animation on hover and then play the animation in reverse when you hover off. but doing so quickly obviously resets the animation and is jerkey, is there a way to maybe reverse the animation from the point where the cursor leaves the button so the animation is seamless?

thanks in advance!

https://lottie-test-aa43a7.webflow.io/

Here is my public share link: LINK
(how to access public share link)

1 Like
2

I figured out a route around the jumpy animations when hovering on and off an element quickly. Instead of using the ‘Lottie playback’ use ‘Custom animations’ and start a new animation. Then for ‘On hover’ choose Lottie for both the start and end of the animation (choose duration as 0.1 to prevent any delay in the animation playback). Then adjust the frames at the bottom for each endpoint. Do the same for ‘On hover out’ but reverse the frames around.

1 Like
3

thankyou! that worked perfectly