Lottie pause loop to animate along animate X-axis

Design help Animations & Interactions
1

I have a lottie animation that I want to:

  1. Loop immediately when the page is loaded
  2. Animate on the X axis when hovered over
  3. Go back to looping after hover out

‍
I can get some combination of these working together, but not all three.

My brain is not big enough to figure this out please help.

Here is my public share link: https://preview.webflow.com/preview/lottie-test-fac50f?utm_medium=preview_link&utm_source=designer&utm_content=lottie-test-fac50f&preview=6b3717de5cb52ed00edf458e477eab0b&mode=preview

(how to access public share link)

2

@dakota Change the “affect” to “selected element” instead of “interaction trigger”. Because here the Trigger is not the Lottie, but the page itself. (Whereas for the hover animations, the lottie is the trigger)

37%20PM
37%20PM576×1194 55.4 KB

3

This works to make it start looping when the page loads, but it also overrides the hover effects.

4

Oh sorry didn’t see that. In this case you would have to find some .js code to make it happen. Wish I could help with that, but I’m more of a designer than a developer.

I did try something that worked tho: Add a duplicate lottie (duplicate and change div name), set both positions to absolute, and give one of them a higher z-index. The one top will have only the Page Load trigger, and replace hover animations with a simple “Hide”. It will instantly go away, and the one underneath who still has the hover animations will behave like you need it to (x-axis and hover out animation).

5

No worries, thanks for all the help :relaxed:

I might end up going with you’re work around

1 Like