Trigger Lottie animation with other objects

I can see how to start a Lottie animation from another object, such as a button. But, it’s a bit wonky because you need to check the length of the Lottie animation and make sure your animation goes for that length (or longer - default is 0.5s). And then, once this is setup, I don’t see a way to either (a) reverse the animation – say on a second button click or (b) reset it. I also don’t see an option for looping. Seems like a one time thing. You click/tap/hover an object and the Lottie animation plays for the length of your animation.

Curious if others found ways to control Lottie more effectively via other objects?

Hi @Josh_Gordon

So what exactly do you mean that the length is connected to a button click?

Also if you want to reuse the animation on the button click you can do it so long as you set the initial state to the beginning of the animation (so that it returns there once it plays). If you want to reverse it just have it start at the last Frame and then progress to the first frame…

So on first click frame 1 to 99 and second click 99 to 1
OR
First click only - initial state frame 1 then to frame 99

(i have an animation that has empty 1st frame so I have a hover animation that works like this:

  1. initial state 99%; 2. start on 1%; 3. end on 99% - and it works on every hover)

This doesn’t work for me. Let me explain further:

I have a simple button and I’m adding a mouse click interaction. On first click I can get the Lottie animation (mine is about 3 seconds) to play if I drag the slider up to 100% and also ensure that the animation has a Duration of 3 seconds as well (otherwise it runs slower or faster than the original Lottie animation). What I am not able to do is create two instances of the Lottie animation within this timeline so at 0 seconds it’s at 1% and at 3 seconds it’s at 100%. That doesn’t seem to work. And I still can’t get it to repeat on further clicks.

Do you have a read only version of what you’re doing so I could take a look? Maybe I’m missing something fundamental here?

Hi @Josh_Gordon,

Have you looked at any of the Lottie/After Affects videos that is up on the university page?

If not, go check it out: Web animations with After Effects & Lottie | Webflow University

Yes - all of them @QA_Brandon. But there’s nothing about using a button or other object to trigger / interact with a Lottie animation.

Hello, @Josh_Gordon!

You definitely CAN trigger a Lottie Animation by using a trigger button (some other element). All you need to do is target a Lottie element inside the Interaction and select a Lottie action in the dropdown of actions:

6 Likes

:point_up: This type of interaction will NOT be possible because each time the Lottie file is connected to the interaction, the system is calculating the number of frames in it.
CloudApp

Targeting few different Lottie files will not calculate frames/percentage correctly, sorry.

1 Like

The Looping is at the Animation level:

For the playback, set it with two keyframes:

Check here: https://sbx.webflow.io/

Share link: //preview./preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&mode=preview

You can see the default Lottie length once you connect it inside the Interaction. The 0.5s is default “transition” tyme for all types of interactions.
19%20AM

To reverse-play animation, you would need to set the “end” frame as an initial state and then play the animation to the “first” frame

To reset Lottie animation just use the Lottie action, set it to 1st frame (or whatever you want to reset to) and use 0s duration.

3 Likes

@sabanna and @vincent thanks to both of you for the guidance! Made sense and I was able to do what I needed to get this working. Much appreciated!!!

3 Likes

I ran into the same problem. What I did was set two actions in my interaction:

  1. set animation to 0%
  2. set animation to 100% with a duration as long as the animation (not perfect, but it works)

Did you find a better way?

Took pretty much the same approach. And for reversing, I set animation to 100% at 0 (with transition time of 0s) and then another entry for animation at 0% with the transition time being the length of the animation itself (you could also speed it up/slow it down as desired).

Thanks very much @sabanna! This is just what I was looking for.

1 Like

Do you think that it would be possible to replace a button that we have by the lottie animation on click? It would mean that the animation will not be visible in the first place but will only appear after click on the button and replace it totally.

Here is the animation I would like to implement after someone clicks on a button to show him his request has been validated:
Animation: https://lottieflow.webflow.io/download/scrolling-05-2

Thank you in advance for your help!

It looks like the “Lottie” option within Interactions now only displays when the lottie object is selected as the trigger. Is this new or am I doing something wrong?

Yes I have the same @lIIIlllI . I can not trigger my Lottie animation with a button. I only see the Lottie settings when I’m clicking on the Lottie file. But I would like to start the Lottie animation when I click on another button. Could you have a look @sabanna and @vincent ?

Thanks @sabanna I will give that a try. Maybe it didn’t work because I wanted to apply this to Form and start a Lottie animation on submit. But for that I found this fin sweet tutorial: https://lottieflow-clonable.webflow.io/success/success-on-form-submit