Preload Lottie Animation

Design help Animations & Interactions
1

Hi Guys,

I have a lottie animation on my landing page which is approximately 10-15mb big.
I use a preloader (Pageload) to show the progress but the lottie animation doesn’t seem to be shown to load. Is there any way that you can preload the animation and show it to the user that the animation isn’t loaded, yet?

Best Regards,
Marcel

2

Hey, I am running to the same problem and it’s driving me crazy given that my lottie file is well compressed and under 2MB. Have you find any solution?

3

Now I noticed there are multiple threads about this issue and I thought I might just post my solution here. I ran into the very same issue and my team found quite a nice fix for it. This however does not work with the page load weblfow interaction and instead makes it completely work with javascript.

window.onload = function() {

//See if there is a lottie file on the page
if (window.Webflow.require("lottie").lottie.getRegisteredAnimations().length > 0){
    
//Check every 100ms if the lottie file has loaded 
	var loadLottie = setInterval(function(){
      if(window.Webflow.require("lottie").lottie.getRegisteredAnimations()[0].isLoaded === true) {
        // hide your preloader (e.g. $('.loading-div').fadeOut(); )
        clearInterval(loadLottie);
      }
    }, 100);
}
//Hide the preloader if there is no lottie file on the page
else{
// hide your preloader (e.g. $('.loading-div').fadeOut(); )
}
};

Let me know if you have questions towards this :slight_smile:

1 Like
4

This worked perfectly! Thank you!