Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Stop Animations with killTweensOf and killAll in GreenSock

    John LindquistJohn Lindquist
    greensockGreenSock

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss