My lottie animation doesn't load by the time the Preloader is done

Design help Animations & Interactions
1

On my homepage I’ve designed a Lottie animation at the bottom with some images that go into a phone screen. The lottie file is a little big and I understand will take some time to load. For this reason I’ve included a preloader to cover up the load time of the lottie animation.

But on mobile phones especially, the Preloader appears and then fades off and the Lottie animation takes an additional 10 seconds to appear.

My website looks really bizzare without the lottie animation loaded, and so I’m wondering if anyone has a solution to ensure the preloader only fades once the lottie has loaded?

Appreciate any help!

Here is my public share link: LINK
(how to access public share link)

2

Hi, did you find a solution? Having the same problem!

3

Hey! Any updates on this? I’m facing a similar issue.
The webflow page load callbacks do not take into account loading of the lottie animations and theres no way to set the lottie animations to preload - the same way you do with typical images.