Jump to content


Problem understanding and using kill()

Go to solution Solved by mango-nyc,

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'm trying to kill a tween after it plays- mainly because the <div> flies off the page- but it's still there, as you can scroll to the right and it is still there. I would like both divs to disappear after animating through the timeline.


I know there is a "clear()" as well, or maybe I should be using "clearProps"





See the Pen yeKxyM by mangonyc (@mangonyc) on CodePen

Link to comment
Share on other sites

Hi mango-nyc :),


If I understand you correctly, you'd like to remove those elements completely after the animation? If so, you could do something like this:

tl = new TimelineMax({onComplete:theEnd});
tl.to ("#leftBlock", 1.25, {x:2200, transformOrigin:"50% bottom", ease:Power1.easeNone})
  .to ("#rightBlock", 1.75, {x:-2200, ease:Power1.easeNone},"-=.5");
function theEnd() {
 $("#leftBlock, #rightBlock").remove();

Here's some more reading about taking elements out of the DOM.



Hopefully this helps a bit.


  • Like 1
Link to comment
Share on other sites

Thanks PointC,


That would work. I was actually looking for a solution within the Greensock API if that is possible.


Just curious how I would use kill( ); or clear( ); or clearProps( ); for something like this, or it might just be that they don't work the way I imagine.



Link to comment
Share on other sites

Hi mango-nyc :)


there isn't any method in GSAP api to manipulation the Dom structure .


and about methods you mentioned :


.kill( ) : Kills the animation ( Tween or Timeline ) entirely 


.clear() : Empties the timeline of all tweens, timelines, and callbacks


clearProps : A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties)

  • Like 2
Link to comment
Share on other sites

  • Solution

Thanks Diaco,


That's very helpful to know, and thanks for the explanations of the other methods.

Link to comment
Share on other sites

Great Answer Diaco explaining the various methods B)


mango-nyc .. Just to add to Diacos great advice! Here are some other available kill() methods. All can be found in the GSAP Docs page


Here is a list of available GSAP kill methods:





Kills the animation entirely or in part depending on the parameters.



//kill the entire animation:

//kill only the "x" and "y" properties of the animation (all targets):
myAnimation.kill({x:true, y:true});

//kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected):
myAnimation.kill(null, myObject);

//kill only the "x" and "y" properties of animations of the target "myObject":
myAnimation.kill({x:true, y:true}, myObject);

//kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2":
myAnimation.kill({opacity:true}, [myObject1, myObject2]);





Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.



//kill everything
//kill only tweens, but not delayedCalls or timelines
TweenMax.killAll(false, true, false, false);
//kill only delayedCalls
TweenMax.killAll(false, false, true, false);





Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.



<div id="d1">
   <div id="d2">
     <img src="photo.jpg" id="image" />
<div id="d3"></div>

TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("image"), 1, {css:{left:100}});
TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}});

//only kills the first 2 tweens because those targets are child elements of the "d1" DOM element.
TweenMax.killChildTweensOf( document.getElementById("d1") );





Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.




TweenMax.killTweensOf(myObject, {opacity:true, x:true});



You could use any of the above GSAP methods to kill the animation in part or entirely depending on the parameters and what method you use. :)

  • Like 3
Link to comment
Share on other sites

Jonathan - I had a feeling you'd be along with one of your awesome in-depth answers. Great stuff. :)

  • Like 2
Link to comment
Share on other sites

Thanks Jonathan and everyone else, that's really helpful.

I've been playing around with these to better understand how they work in different situations.

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.