Stop Animations with killTweensOf and killAll in GreenSock
There are many reasons you'd want to stop an animation from running. TweenMax provides ways to stop a tween of a specific element or every tween currently running, we are going to look at two of them, killTweensOf and killAll. This lesson walks you through stopping a tween by clicking on a specific element or stopping every tween and forcing them all to complete.
Instructor: [00:00] Currently when I click on the document, every box tweens to where I clicked. I'm going to move this out, so it happens automatically, have it last 10 seconds, and have each of the boxes tween to X100 and Y100.
[00:13] Then in this click handler, I'm going to tell TweenMax to kill tweens of the event.target, which means whichever box I click on. I'll refresh, close the star moving here, click on one, click on another one, click on a third one. You can see each of those tweens stopped because TweenMax killed that tween of the event.target.
[00:38] To show that again, I'll just try and click on as many as I can -- click, click, click, click, click, click. I stopped, I don't know, five or six of them.
[00:48] Rather than trying to click on every single one of them, you can say TweenMax.killAll, hit save here. When I refresh, I'll just click and they all stop.
[01:00] Often when you're using killAll, what you want to do is say killAll(true) because you're navigating to another page, or you just want everything to finish quickly. You'll see this moving and killAll(true) will make them jump to their completed state.
[01:16] They're moving, click, and they all jump that final state, so there's 100 boxes stacked right there.