How to interpret Chrome memory profiling result, memory allocation timeline with GSAP

[cadenzah]

Hello, I'm maintaining a Vue.js SPA application which uses GSAP for making animations in the webapp. It seemed that memory leaks happened while using animations, so I did memory profiling and I got the result as below:

 

Please understand that I cannot upload whole specific codes, and instead I would like to ask a question about the way how to interpret the Chrome memory allocation timeline.

 

 

1. Is it okay to think as the GSAP animation objects caused the memory leak according to the retainers stack above?

2. In the code, `window.toast` Vue component is animated by GSAP Tween, and after the animation terminates GSAP will wrap up the animation(`kill()`) and the `toast` will remain in the DOM. GSAP Tween object is stored in Vue component's `data`, it is handled for controlling animation purpose, and after the animation terminates that animation object will be assigned `null` so that it can be garbage-collected(I heard that GSAP cleans up all terminated animations in about every 2 seconds for default). But, it seems that even after sufficient amount of time that animation object is not removed according to the result above. It seems this also causes many *Detached HTMLDivElement*s, which leads to memory leaks. I think I thoroughly prevented the memory leak by removing references(assigning `null`), does this mean I'm missing something? Or, is there a performance issue with GSAP and is there a bug that animation objects in `global timeline` do not get cleaned?

 

Please give me any guess or advice even if it's not accurate answer. I'm so frustrated with this issue lately.

[OSUblake]

Welcome to the forums @cadenzah

 

It's pretty hard to make sense of that screenshot without having some code to test to reproduce the issue. There are currently no known memory issues with GSAP, so a minimal demo would go a long way in giving you a better answer.  

 

All I can say from your description is that you really don't need to put animations inside a data object. The data object is for reactive properties of your component,  but I don't know if removing that will help at all.

 

 

I would also check to see how many tweens are actually on the element using gsap.getTweensOf(). If there is more than the 1 you created, then you might have an issue somewhere in your code.