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.

To accurately determine when Lottie Animations on a Webflow page are fully loaded and ready to be displayed, you can use the Lottie JavaScript library's built-in events and methods.

First, load the Lottie library by adding the following code to the head of your HTML file:

```html

```

Next, add your Lottie animation to your Webflow project and give it a unique ID. For example: `#my-lottie-animation`. Make sure you set the Lottie animation to autoplay when the page loads.

Finally, use JavaScript to listen for the `DOMLoaded` and `complete` events triggered by the Lottie animation. The `DOMLoaded` event fires when the Lottie animation has been added to the DOM but hasn't yet started loading the .json file. The `complete` event fires when the Lottie animation has finished loading and is ready to be displayed.

Here's an example code snippet that you can use:

```javascript
document.addEventListener('DOMContentLoaded', function () {
var animationContainer = document.querySelector('#my-lottie-animation');
var animationData = JSON.parse(animationContainer.getAttribute('data-animation-data'));

var anim = lottie.loadAnimation({
container: animationContainer,
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
});

anim.addEventListener('DOMLoaded', function () {
// Lottie animation has been added to the DOM but hasn't started loading yet
// You can show your preloader here
});

anim.addEventListener('complete', function () {
// Lottie animation has finished loading and is ready to be displayed
// You can hide your preloader here
});
});
```

In this code, we wait for the `DOMContentLoaded` event to ensure the entire web page is loaded, and then we select the Lottie animation container using its ID. We load the animation using `lottie.loadAnimation` function and specify the required options. Finally, we add event listeners to the `DOMLoaded` and `complete` events to show/hide your preloader accordingly.

By using the `DOMLoaded` and `complete` events provided by the Lottie library, you can accurately determine when the animation is fully loaded and ready to be displayed on your website.