How do I stop a Lottie animation from playing when the page loads?

I have some Lottie animations on my site. I have them set to play when they scroll into view, but for some reason, they also play when the page loads.

This means that when I get to the Lottie, it resets to 0 and then plays through.

How do I keep the Lottie file at 0% until it scrolls into view?


bump this. I have my interaction setup, but for some reason, the lottie animation just starts playing even though I have it set to play when scrolling in view…

[EDIT] I actually just fixed it. I simply re-targeted the lottie class interaction I had setup, and it worked fine after. There’s a weird bug in Webflow, where sometimes the interaction just needs to be re-targeted and it works as it should after.

What does re-targeting mean? I have the same problem with my menu icon animation. starts playing when the page loads. what can I do?

Hi Peej,

I noticed your post is from a while ago, but I have the same situation currently, so I was wondering if you figured it out eventually. Please let me know.

Best.

EDIT: I figured it out for my own situation. Instead of adding the trigger-animation to the element I added it to the page, then the problem was solved.

FIX - I posted this on another thread but wanted to post it here also for reference.

I fixed this issue by setting the built-in duration to 9999999999

The animation is triggered by a separate interaction on the page and that works fine.

image

2 Likes

Awesome, I just ran into the same issue. Tip from @Diarmuid_Sexton works flawlessly.
TY

Thanks. Worked for me as well. I was able to achieve a cool effect by stacking 2 Lottie files on each other, one with no animation using @Diarmuid_Sexton’s method. I animate the hide/show on both in reverse order whenever I want to switch states in the animation. It would be cool if they had an option in the Lottie settings to animate or not. :man_shrugging:t3: Could do all that in Ae, but I found this an easy solution.

I have a cool Lottie file of a string dangling, but I needed it to only dangle when the banner breaks off the string being pulled by an airplane. :small_airplane: