TweenMax tips: .to() and .staggerTo() instructions


TweenMax tips: .to() and .staggerTo() instructions

One of my favourite JavaScript library is TweenMax, part of GSAP family at GreenSock, a powerful tool for web animations with incredible fast performance, really good workflow and a perfect browser compatibility: in other words, the best friend for you fancy animations.

TweenMax easily animates every CSS property, works with GPU acceleration, uses 3D transform on modern browser to boost performance with a 2D fallback for older browsers, provides an easing tool to improve movements and much more.

Here you can find a nice post about why GSAP rocks!

Two of the most used instructions for me are .to() and .staggerTo(), two methods for create stunning animation with few lines of code.


.to()

The .to() instruction is something similar to the .animate() instruction of jQuery. It animates an objects from his starting form to the new one with an animation time and an easing curve. It can animates almost everything CSS property and it provides a lot of nice goodies like callbacks (examples: onComplete, onStart, etc.), easing curves, delay declarations and much more.

The code syntax is:

TweenMax.to(object, time, { properties });  


Let's do an example of implementation:

// getting object
var myObject = document.getElementById("my-object");

TweenMax.to(myObject, .5, {  
    x: 50,
    color: '#FFF',
    ease: Circ.EaseInOut,
    onComplete: function(){
        console.log('animation completed');
    }
});


With this simple lines of code I move on the X axis my object of 50px and I change the color of its font, using a circ in-out easing curve with a 500ms of time.

Check out this JSFiddle to see the result.

Other nice feature is the change class animation: you can declare a CSS rule that change the state of an element, then you can say at TweenMax to add your state-class at your element using your own time, easing curve, custom callbacks, etc. Just use the property className.

TweenMax.to($object, .6, { className:'+=my-class' });  

.staggerTo()

The .staggerTo() instruction is the brother of .to(). What it does is simple: it animate a list of objects, one after the other, with a delay time between each other. It has the same functionality and the same coding structure of the .to() instruction.

The code syntax is:

TweenMax.staggerTo(objects, time, { properties }, delay);  


Let's do a simple example:

// getting list of objects
var myObjects = document.getElementsByClassName("list-object");

TweenMax.staggerTo(myObjects, .5, {  
    x: 50,
    width: 150,
    opacity: .3,
    ease: Sine.EaseIn,
    onComplete: function(){
        console.log('animation completed for one element');
    }
}, .15);


With this .staggerTo() code I want to move on the X axis my objects of 50px, change their size to 150px in width and set their opacity to 30%. The animation time is 500ms and the easing curve is a simple sine ease-in. Last thing, every objects start with a delay of 150ms after the previous one.

Check out this JSFiddle to see the result.


I really think that TweenMax is one of the most powerful animation tool available today, and what we have seen today is just the 1% of its power. Give it a try!

That's all for today guys, hope you enjoy it!
For any question or integration, 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