kill a timeline which is animated via tweenTo - weird behavior

[trompx]

Hello everyone,

 

I was animating an element with mytimeline (a timelinemax with an onComplete function) with the following :

mytimeline.progress(0, false).timeScale(1).tweenTo(mytimeline.duration(), { ease: 'myease' });

 

I have a destroy function that is called when I remove the page from the dom. When it is called, I do:

mytimeline.kill();

But After the destroy has been called, the onComplete function of the mytimeline still fires (thus the animation keeps going despite I just killed it).

 

I noticed here https://greensock.com/docs/TimelineMax/tweenTo that tweenTo create a timeline which animate the mytimeline time.

Is it intentional that when killing the mytimeline, the tweenTo still holds a reference of mytimeline to complete it and thus the only way to really kill it would be to :

- save a reference of the tweenTo

- before killing the mytimeline, kill the reference to the tweenTo first

 

Wouldn't it be better to automatically kill the tweenTo instance when the timeline it is animating is killed or not defined anymore ?

 

Thanks in advance for the clarifications, and for the great library

 

[GreenSock]

It should be as simple as:

myTimeline.kill();
TweenLite.killTweensOf(myTimeline);

 

Does that resolve things for you? 

[trompx]

Thanks for your input.

I mean my solution were already working, yours works totally fine too.

 

But I was more wondering why after killing a timeline the onComplete event can still fires.

Wouldn't it be more logical to automatically kill the tweens internally?

From the docs when we kill a timeline it is supposed to kill all its tweens

Quote

will immediately stop the animation and release it for garbage collection

so this behaviour is not what I was expecting as it is obviously not immediatly available for GB as it has at least to wait that the tweenTo is done.

I haven't done any test yet to check if the object was really GBed in the devtools in my SPA on the tweenTo finished.

 

And my bad if I missed the bit of info explaining exactly this.

[GreenSock]

Well, it does immediately stop the timeline itself (and internally release it for GC), but it can't know if you've got a variable somewhere in your own code that'd keep a reference to it (meaning it can't be GC'd). It also can't really know that a completely separate (external) tween is animating that timeline's playhead. 

 

I suppose we could add more code internally to try to sense this condition, but it seems like such a rare edge case (this is the first it's ever come up in 10+ years) that's easily solved by implementing the code I mentioned above. See what I mean? So I've gotta weigh if the edge case really justifies the additional kb of the internal code. That's tough in cases like this. 

 

Glad you've got things working well, though. 

[trompx]

Yes I totally understand that it may be not worth it, and there is a solution.

As all tweens / timelines have ids, I think it should not be so hard to know that a completely separate tween is animating the timeline's playhead though.

Anyway thanks a bunch for the fast help!