memoryleak Tricks to check released memory (GC) memory leaks

[jonForum]

hey guys, did you have a cool trick to search a specific tween in memory ?
 

In a complexe deep events with multiple promises, i can destroy tweens but also keep some specific looping tween active !
And it become little bit hard when inside a breakpoint , to look and debug in memory if all go fine.

 

You know when your search current active objects in memory.
It hard to know what tween i need keep or release to gc.
Did you have a tricks or maybe a thing we can do to know what tween are currently in memory when debuging?
The example upper show me when snapp the memory, i have 10 tween in memory can't release in GC , and it hard to know wish and where the are come from.
i was think about something like 

 const t = TweenMax.staggerTo(container.children, 4, {x:()=>`+=${Math.randomFrom(4,-8)}`,y:()=>`+=${Math.randomFrom(7,-10)}`, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2);

// this not work, but a kind of naming memory to easy search if the tween was destroyed in memory?
t.memoryName('blablaMemoryID'); // create a easy search reference for debug only 

Because i notice some memory leak from my events, and am trying to debug, but it hard to know what,where,when, from in a complex and deep events with a lots of tweenings features..
What your suggest to me , did you have good trick to learn me.

It will be very cool guys if you can release us a video to how debug memory for your tweens engines (tips tricks).

or maybe your already have one i didnt seen!
it could help to master the tween and the mistakes not to do, I'm sure I made a stupid mistake somewhere that causes me a memory leak.

sorry if this is a stupid question or not related to your engine :), hope you can help me here.
Also sorry for poor english, i try my best

[OSUblake]

1 hour ago, jonForum said:

hey guys, did you have a cool trick to search a specific tween in memory ?

 

No. GSAP is just JavaScript, so the same rules apply to tweens as normal JavaScript objects.

https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/

 

You can clean up after yourself to limit memory leaks.

let tl = new TimelineMax().to(...)

...

tl.kill();
tl = null;

 

I do this for classes.

class Foo {
  constructor() {
    this.tl = new TimelineMax().to(...)
  }
  
  destroy() {
    this.tl.kill();
    this.tl = null;
  }
}

let foo = new Foo();

...

foo.destroy();
foo = null;

 

 

2 hours ago, jonForum said:

You know when your search current active objects in memory.

 

Using breakpoints is an easy way to see what's in memory.

https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints/

 

[jonForum]

I read these tutorials a long time ago, maybe I will have to read them again to refresh my mind.
I hoped to learn a new magic tricks here.

But from my workflow and search, i don't think i have memory leak about my engine.

the only issue with `this.tl.kill();`
it will kill all tweening active.
On my side i need take a look of specifiques tweens created in the streams.
And they are created inside many promises and inside `tl.addCallback(() => ...`, promises, and i also keep somes tweens alives insides.
 

But ref the timeLine in the class can be good , i will try to see if this can help! 
Am also pretty visual, if you know a good video tuto about this , i take!
Thanks again Blake, your awesome.

 

Edit: `the only issue with `this.tl.kill();`it will kill all tweening active.`
oups sorry forget me about this !lol

[OSUblake]

1 minute ago, jonForum said:

the only issue with `this.tl.kill();`
it will kill all tweening active.

 

It only kills this.tl. 

 

4 minutes ago, jonForum said:

I hoped to learn a new magic tricks here.

 

Yeah, sorry. There is are no magic tricks when it comes to memory management. You just have to be mindful of what you're doing, and where you are creating references.

 

 

[ZachSaucier]

In GSAP 3 you can assign an ID to a tween (or timeline) and use gsap.getById() to look it up. Not sure if that's helpful  

 

If you're really worried about garbage collection (the browser cleans up pretty well by itself) you can consider adding a default onComplete for your tweens that cleans up however you need.