For reference, HERE is the published version of what I’m needing help with.
I have 4 lottie animations loaded up that when strung together is one contiguous animation. Since they are split up into 4 JSON files (for faster loading times), it’s imperative that all 4 animations begin at the same time. If they don’t the entire sequence is thrown off.
The problem is that all the animations tend to load, and thus begin, at different times. To fix this, I created an interaction using page load as the trigger. More specifically, it makes sure the page has loaded before the interactions start and they all start at the same time just as I need.
However, this creates another problem and is the reason I’m seeking help. The animations don’t loop anymore when I use this interaction. My guess is that this is because my trigger is “after page finishes loading,” but there has to be a solution here.
TL;DR
I need a way to delay the playback of 4 separate infinite looping lottie animations so that they all start at the same time once the page has finished loading.
Thanks for taking a look!
Here is my public share link: https://preview.webflow.com/preview/novus-staging?utm_medium=preview_link&utm_source=designer&utm_content=novus-staging&preview=c060a78c2cae72c221139962d6c45ccd&mode=preview
(how to access public share link)