TweenMax tips: the important of .killTweensOf()


TweenMax tips: the important of .killTweensOf()

Here we are with a new post about TweenMax, a powerful tool that I love to use to create beautiful and smooth animations on my webpages.

Today we are gonna talk about a very useful method to stop your timeline, situation that can occurs when you need to launch a new transition but another one is running: .killTweensOf().

First of all: why I need to stop a transition? Simple. Sometimes you need to animate something that is already animating, touching the same properties. To avoid stupid bounce effects, to keep your timeline more clean as you can, to let TweenMax work in the best way as possibile is a good practice to kill running tweens.

The code is very simple:

TweenMax.killTweensOf(myObject);  

I want to show an example:

/*/ animation /*/
TweenMax.to(myObject, .5, {  
    width: 500,
    height: 600,
    opacity: 0.7,
});

TweenMax.killTweensOf(myObject);  

In this way your animation on myObject is gonna killed.

Another power of .killTweensOf() is that it can kill only some properties of a particular animation. To do this, just use the second parameter of the method:

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

If you want to read more about this useful tool, here is the documentation.
That's all for now, for any question or integration please drop a comment below!



Daniele Petrarolo

Daniele Petrarolo

http://www.danielepetrarolo.com

In love with #JavaScript, #PHP and #Python / Web Developer / There's no place like 127.0.0.1.

View Comments