I’m having an issue with loading one Lottie animation twice (so it can be used in a moving marquee). The problem I’m having is with the wave animation at the bottom of the screen—when you load the page the first time, everything is fine, but on the second time you load the page the animations de-sync and the waves start at different times.
You would think the two wave animations would load at the same time since they’re both referencing the same file on the Webflow server, but based on my half-assed internet research, it seems like the first instance will load from the server while the second instance will load from your local browser cache.
I’ve found some code solutions to delay the start of the Lottie animations, but I can’t figure out how to implement them since Webflow natively supports Lottie files.
instead of using the native Webflow lottie support you can use lottie webplayer - upload your lottie to lottie files and copy the json link. then go to Lottie Web Player - Lottiefiles and paste your link there, set the options you need and copy the code it makes. Create an HTML embed inside the div you want the lottie to be in and paste the code into it.
Ah! Thank you for the quick reply. I think this would work in normal circumstances, but since my file is over 10MB (currently @15.5MB even after removing metadata + compressing individual images) the uploader won’t accept it.
Do you know if there’s a way to just add specific parameters to my Webflow-hosted Lottie file, like turning off the autoplay and using animation.play()?
Got it! For some reason, I thought that the Lottie animations just started whenever the page loaded (like GIFs), I didn’t realize it could be a timed start.