Jump to content
GreenSock

Tom B. @ Wix

Is there something like an onKill event?

Recommended Posts

Is there an event like onComplete that invokes when killing a tween before it was completed?

Link to comment
Share on other sites

Hi Tom,

 

Nope there are not callbacks for the kill method, but when working with the compressed files code execution should be quite fast, so the kill method should be completed in a matter of milliseconds.

 

For example if you try this code:

var div = document.getElementById("div1"),
    kbtn = document.getElementById("kill");


TweenLite.to(div, 5, {left:300,top:300});


kbtn.onclick = function()
{
  var element = TweenLite.getTweensOf(div);

  setTimeout(function()
    {
	console.log(TweenLite.getTweensOf(div));
    },10);

element[0].kill();
}

It'll output an empty object, so as you can see is a very fast execution (the timeout is just 10 miliseconds) and I tested it with the uncompressed version of TweenMax, so we're talking about a bigger code block.

 

What you could do is kill the animation on an event handler and after the animation being killed you could add the code you want to execute:

var div = document.getElementById("div1"),
    kbtn = document.getElementById("kill");


TweenLite.to(div, 5, {left:300,top:300});


kbtn.onclick = function()
{
  var element = TweenLite.getTweensOf(div);

  element[0].kill();

  //code to be executed after killing the tween
}

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hello Tom B....

 

just to add to Rodrigo's great advice.. here is a list of available kill methods:

_________________________________________________________________

 

kill()

 

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

 

http://api.greensock.com/js/com/greensock/core/Animation.html#kill()

//kill the entire animation:
myAnimation.kill();

//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]);

_________________________________________________________________

 

killAll()

 

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

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killAll()

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

_________________________________________________________________

 

killChildTweensOf()

 

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

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf()

<div id="d1">
<div id="d2">
<img src="photo.jpg" id="image" />
</div>
</div>
<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") );

_________________________________________________________________

 

killTweensOf()

 

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

 

http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf()

TweenMax.killTweensOf(myObject);

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

_________________________________________________________________

 

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

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

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.
×