Jump to content
Search Community

kill all tweens of an element

coolester test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have created a button, to remove all tweens of an element completely, forever, But It's not working, please help me.

edit: I have noticed if the animation finishes and then I hit the button it will remove all the tweens of the timeline, which I don't expect because I specify to remove tweens of an specific element.

See the Pen XMQrZd?editors=0010 by coolesterman (@coolesterman) on CodePen

Link to comment
Share on other sites

Hi coolester,


why do you use "autoRemoveChildren: true," (If true, child tweens/timelines will be removed as soon as they complete.)


To kill all the tweens (or specific tweening properties) of a particular object you can use "TweenMax.killTweensOf(myObject);".

Have a look: https://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/


Your version "tl.kill(null, $('#div2'));" refers to the children of a particular DOM element.


The forked fiddle: https://jsfiddle.net/hqe62eng/


I hope its helpful.


Best regards


  • Like 1
Link to comment
Share on other sites

Hi Manfred, Thank you so much. I didn't know I could use 'TweenMax' even though I add the animation to a timeline, Very helpful thank you.

But there is a problem, If I hit the kill button in your fiddle, it will kill the tween only if the timeline is playing, and if it is completed the kill button seems to do nothing. Why is that?

Link to comment
Share on other sites

Hello again my friend, Manfred. could you look at this pen:

Here I've got a tl (TimelineLite) and I have a tween for the pink square already, when you hit 'create/update animation' , a new tween will add to blue square, but before adding a new tween I need to delete an already attached tween to blue square, and then create a single new tween for it. So at any time there is just a single tween attached to blue square, its either 'fade' , 'left' or 'right'. How can I achieve this?


sorry to bother, and thank you for the time you spend to see my example.

Link to comment
Share on other sites

  • Solution

The problem isn't the kill() - it's just the fact that you seek(0) which renders the timeline at a particular state and if you kill a tween, it doesn't suddenly force the target to revert to a different state. For example, if you tween opacity from 0 to 1 and then you rewind that tween, opacity will be 0. Then if you kill() that tween and drop another one into the timeline, opacity is still 0, thus it LOOKS like the tween didn't get killed but it did. 


One solution would be to just reset the styles that you edited, like:



Does that help?

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...