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.


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.