Any way to preload all pngs involved in animation without playing it first?

[kieferslaton]

First of all, this library is a life-saver. We recently swapped our spritesheets to Lottie and it's amazing what it does to page load time and the smoothness of the animations.

I have a site with several relatively heavy (1-3MB) animations. I'm using GSAP scrollTrigger to play them when they scroll into view. Because I have several large videos on the site as well, I just added the .json files to a preloader using the following function I wrote:

function loadLottie(src, target) { return new Promise(function (resolve, reject){ let el = document.querySelector(target); el.addEventListener('load', function(){ resolve(src); }) el.load(src) }) }

I then call each loadLottie('data.json', 'target') as part of the promise chain of the preloader. The issue I'm running into is that because some of the animations are so heavy, I'm getting flickering for the first 10-15 seconds since all the supporting pngs are not loaded until the animation plays. I've tried autoplaying the animations then pausing them just before they come into view, which helps a lot, but there are some edge cases where it still doesn't fully load the animation if the user scrolls too quickly or uses the nav menu to jump to a section. Is there any way I can modify my preloader function to load not just the json but also all the supporting pngs?

[karamalie]

Hi @kieferslaton ,

im assuming that the animations have inline pngs within the Lottie itself, the renderer was built mostly for 2D vector animations and as such is not optimized for this use case. With large animation files, the lag is noticeable as the player does not cater for it. Time will be lost in fetching images, decoding them, and rendering them. There is no method to preload the pngs via the player

The promise chain is a neat hack to get around this though. Something you could try if the images are inlined is to export out the images separately. uncheck the option that asks to include the images inside of the json in After Effects. The images should be the same name as the source and inside of "/images".

side note* you can however listen for an "images_loaded" event.

[karamalie]

closing due to inactivity