AnimationItem.destroy memory leak

[nathanbrud]

Tell us about your environment
MacOS 10.14.4

• Browser and Browser Version:
  Chrome 79.0.3945.88

What did you do? Please explain the steps you took before you encountered the problem.
Reproduce here - http://wbtz-test.s3.amazonaws.com/lottie-test.html

1. Take heap snapshot.
2. Load animation using lottie.loadAnimation()
3. Destroy animation using lottie.destroy() and set animationItem to null.
4. Take heap snapshot.

What did you expect to happen?
Heap size to return to the same value before lottie was loaded.

What actually happened? Please include as much relevant detail as possible.
Heap size increased by 600kb

Please provide a download link to the After Effects file that demonstrates the problem.
Animation data in in the example - http://wbtz-test.s3.amazonaws.com/lottie-test.html
Just used a random animation from lottie-files, was able to reproduce with other animations as well:

1. https://lottiefiles.com/13721-clock
2. https://lottiefiles.com/13667-new-year-2020

Thanks in advance! :)

[bodymovin]

Hi, there is some initialization of cached data that happen when an animation starts, but it should be a one off time.
Do you see an increase of heap size every time you load a new animation and destroy it on the same session?

[nathanbrud]

Thanks @bodymovin after multiple loads the heap size returns to the size after the first load.
In my use case I need to load new animations and destroy them multiple times.
Is there a way or some workaround to get rid of this cached data?
Eventually I end up with a pretty big memory leak with the current behaviour...

[bodymovin]

I can see if I can expose a method to remove all cached data.
But can you give some more detail about your scenario that produces a memory leak?

[nathanbrud]

@bodymovin That would be amazing!
In my scenario I'm using a new container (modal) and load the animation there.
After the modal is closed I'm destroying the animation.
So each time the modal opens and closes the heap size is increasing instead of returning to normal.

[bodymovin]

@nathanbrud even if resources are freed, JS decides when to sweep memory and release resources by multiple factors.
As long as there is no memory leak, you shouldn't worry about this.

[siba2893-avantica]

Hey @bodymovin we are experiencing the same issue, when we load multiple instances of the same animation we start to see an increment on the Google Task Manager for the tab where memory usage increases up to 1.5gb and totally freezes the site.

Any idea?

[bodymovin]

@siba2893-avantica are you using AE repeaters on the animation?

[ape-casear]

"lottie-web": "^5.7.3"
electron: 5.0.11
renderer: svg
It seems like if you stop the animation by invoking "ani.destory()" halfway. there are so many IImageElements leak.

@bodymovin

[ape-casear]

[mifi]

Could it be related to #1159 ? try to use lodash.clonedeep on the animationData