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?
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:
initial state 99%; 2. start on 1%; 3. end on 99% - and it works on every hover)
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?
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:
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.
Targeting few different Lottie files will not calculate frames/percentage correctly, sorry.
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).
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.
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 ?
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.
