Is it possible to lottie.destroy() the animations with conditional visibility?

Design help Animations & Interactions
1

Hi,

I’m working on a project with a couple of lottie animations that use canvas render for rasterized assets. These animations are shown on a cms template page and I therefore use conditional visibility to show the right lottie animation according to what page the user is seing.

My problem :
• All the lottie animations present on the page are loaded with page load. Therefore even if non are visible, they will all load and show in the network waterfall. (Big problem for page speed)
• If I use jquery load to only load the animations that will be shown the lottie animation doesn’t render

Is there a way to .remove() or lottie.destroy() the lottie animations that are in a parent div with .w-condition-invisible ?

2

Hey
Trying to do the same thing.
Any way to control when animations are loaded, would like to load them conditionally as well.
Ideally preload a given number of px before they would become visible.
Would really like to avoid the heavy initial load, dealing with 100+mb of lottie animations

Thanks