Preload Lottie Animation

Design help Animations & Interactions
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