Kill the animation after it is complete

[chenxin]

I have a some animations which cannot be reused, so I have to kill it after it is completed. Now I am doing it by calling the kill() method after the completion:

 

 

I am not sure if this is the correct way or the easiest way to do this.

[ZachSaucier]

Hey chenxin. Thanks for being a Shockingly Green member! We couldn't do what we do without people like you.

 

Your approach here is fine if you really need to kill the animation. Most of the time it's fine to just let them live  

 

Alternatively you could use an onComplete for the timeline or an onComplete for the last tween of the timeline. There's not really a "correct" way as they're doing pretty much the same thing.

[chenxin]

Hey Zach, thank you for your answer!

Just curious, what is the cost if I leave them alive, do they cost more memory? If I have hundreds of animations like this, is it still ok to just leave them alive?

[OSUblake]

kill just frees an animation up for garbage collection. It doesn't actually destroy an animation, so you can do this.

 

let tl = new TimelineLite()
tl.to(....)
tl.call(() => {
  tl.kill();
  tl.restart();
});

 

You have an animation stored in your tl variable, so it can't be garbage collected if your tl variable it's still in scope.

 

All these animations will be garbage collected some time after the animation has finished. There is no need to worry about killing in this context.

 

for (let i = 0; i < 100000; i++) {
  createAnimation();
}

function createAnimation() {
  let tl = new TimelineMax()
    .to(...)
    .to(...)
}

 

[GreenSock]

Yep, @OSUblake is correct - there's no reason to kill() an animation that has completed. GSAP already frees things internally for garbage collection by default (after the animations have completed). There's no benefit whatsoever to adding an additional kill() call manually.