How can I accurately determine when Lottie Animations on a Webflow page are fully loaded and ready to be displayed? I have tried using the window.load() event with JavaScript, but it fires before the .json files are finished downloading. I need a solution to create a preloader that disappears when the Lottie animation is loaded and displayed on my website.

Lottie animations in Webflow can sometimes load asynchronously, causing them to delay beyond the window.load() event. To ensure they are fully loaded, you can use the Lottie API to track their readiness. Here's how you can create a more precise loader that disappears once the animation is ready.

​

1. Initialize Your Lottie Animation with JavaScript

• Add your Lottie animation as a Webflow component to your page.
• Retrieve the animation container using JavaScript, such as by an id or class.

​

2. Use Lottie’s onComplete or addEventListener Methods

• Access the Lottie animation instance using the Lottie player’s API.
• Utilize event listeners like complete or custom loading start/finish actions to determine when it is fully loaded.

​

3. Implement a JavaScript Listener

• Create a script in your Webflow project to track the Lottie load event.
• Example approach: 
• Set your Lottie instance to listen for the DOM_loaded event.
• Execute a callback function that hides your preloader once the DOM_loaded event fires.

​

4. Remove the Preloader on Full Load

• Ensure the preloader covers the viewport until the loading event is captured.
• In your callback function, once the animation readiness is confirmed, hide or remove the preloader element by manipulating its style or using a class.

​

Summary

To detect when Lottie Animations on a Webflow page are fully loaded, use the Lottie API to listen for the DOM_loaded event or similar indicators, which lets you know when the animation is ready. Implement event listeners and adjust the preloader’s visibility accordingly. This approach ensures a smooth transition only when the animations are ready for display.