Streaming live at 10am (PST)

Trigger or Javascript Event when Lottie is fully loaded

This is a more general question about the loading behavior of Lottie Animations. Is there a way to tell when the Lottie Animations on a given page are fully loaded and thus displayable? I tried the window.load() event with javascript, but it fires long before the .json files finished loading (and by that i mean downloading, not being processed).

For Context: I have a website that starts with a long Lottie animation (~15MB ) and I would like to build a preloader that disappears when this Lottie animation is loaded (more importantly of course when it is displayed). The weird thing is, that the window.load() event triggers long before the loading is finished and even the browser’s loading icon stops before that. This also means that the “when page finished loading” Page trigger interaction is useless, as well as the legacy interaction with the optional checkbox “wait for assets to load”.

Any idea on how to do this with JS?

is there maybe another place where someone could help me on this issue?

Hello. I have same problem and not solution founded. I build a preloader and my lottie animation is not load at the end of the preloader. I can cheat with delay but is illogic and don’t work when your connection is very slow.

I am currently using this workaround: I place a div block with a small loading text and animation behind the lottie block. Once the Lottie has loaded, it will cover that loading block. I guess that’s another way of telling people that they might wanna wait for the content to load before scrolling…