Streaming live at 10am (PST)

Loop Lottie Animations Using Page Load As a Trigger?

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)

Hi Irwin,

You can delay any element inside you interactions.
In the interaction panel, select all the 4 lottie animations, and add delay to them:

I just realised this way your loop will have a 4 sec. gap every time… so this solution is not good enough.

I suggest this:

  1. Have the lottie files start with no Delay on page load, looping.
  2. Create a 2nd interaction with these lottie elements opacity starts at 0, and after 4 sec goes to 100.

Hey @avivtech! I appreciate the suggestions. I’ll give this idea a try and let you know what I find. Thanks, again!

1 Like