Stop Animations with killTweensOf and killAll in GreenSock

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

egghead
egghead
~ 2 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today