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?
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.
Awesome, I just ran into the same issue. Tip from @Diarmuid_Sexton works flawlessly.
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. 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.