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

Design help Animations & Interactions
1

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?

1 Like
2

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.

1 Like
3

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?

1 Like
4

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.

5

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
6

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

7

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:

8

Unfortunately none of the above is working for me. I tried @Diarmuid_Sexton’s 9999999999 duration trick and also tried re-targeting the lotties, but it keeps playing on page load. I have an interaction setup to animated them while an element is scrolling in view, but they still play on page load.

In general, I’ve been experiencing tons of bugs trying to use lottie animations in Webflow. Webflow has crashed many times and Chrome has crashed many times when I try to edit my interaction.

Also, I’m having a weird issue where one lottie isn’t starting on the first frame. Super annoying.

9

Hi Logan!

Have you checked your memory usage while using Webflow? Personally, I’ve noticed that once my 16GB RAM is approaching maximum capacity, problems start to arise.

Also, how is your system configured?

10

Thanks Danny. I know for sure it is a memory thing. Since you mentioned it, I just went ahead and checked and Chrome Helper (Renderer) spikes to crazy levels while I try to edit my interaction in Webflow. It goes up over 12GB of memory while I try to edit the interaction.

I’m not sure what I can do about this…I wish there was a less memory-intensive way to edit my interactions in Webflow without all of the GUI stuff…in my case (because I’ve been trying over and over to do this in the last two days) I already know generally what values I need to put at which keyframes in the interaction. But I only get a few seconds at most to try to enter in any new information before I get the “Aw, Snap” page as Chrome crashes.

I tried Safari and it was even worse.

Any suggestions you might have would be incredibly appreciated.

11

So I made a huge mistake by not looking at the fine print that you can’t upgrade a MacBook Pro M1 2021’s Memory! I still get sick over it. I don’t understand why they even make a 16GB model, which is considered a pro machine. It makes it so you’re unable to use pro apps in a pro way. Running Illustrator and Chrome with Webflow chews up most of my memory. Also, the macOS consumes about 3GB-5GB.

Sorry for the short rant. :face_with_symbols_over_mouth: But with all that said, the only way I’m able to work is by purging my RAM. You simply open up the terminal and type ‘sudo purge.’ I use CleanMyMac X at times as well, and under “Maintenance,” there’s the option to “Free up RAM,” which I think basically does the same thing.

12

Thanks so much @dannyFig. I really appreciate your help. I have a 64GB ram M1 Mac, so I thought I would be good to go! But I still got tons of Webflow and Chrome crashes.

I was trying to put something together in Webflow that must have required a lot of resources.

I went ahead and purged my RAM and restarted my computer, and then came up with a different idea for approaching my Lottie animations on this page. I’m hopeful it will work.

Thanks again for your time and help!

13

I can’t help but feel envious of that 64GB! Dealing with my stagnant 16GB is a complete nightmare. It looks like I’ll have to bite the bullet and take a $1K hit to get what I need.

PS: I decided to test both the “terminal” method and “CleanMyMac.” Turns out that purging my RAM with the terminal was not reducing my “Memory Used” inside my activity monitor. When I initiate CleanMyMac’s Free up RAM tool, it clears 2GB-3GB. :thinking:

14

Ok that’s good to hear as well. I tried the sudo purge in terminal method and also didn’t see any difference. Restarting my computer worked, but of course isn’t something you’d want to do all the time. I’ll look into that other tool as well, thanks!