Greensock JavaScript Animation

You might be thinking “I already have jQuery! I don’t need another JavaScript animation library.” … While you might feel like jQuery’s animation tools are enough, that’s roughly compared to feeling your old mobile phone is sufficient until you try a smart phone and discover the world of possibilities it gives you to walk around with the internet in your pocket.

A few of the things Greensock does that jQuery doesn’t

• It performs extremely well. About 10 times faster than jQuery. Check out this speed test.
• It makes it very easy to animate groups of items either by appending one animation after another or by applying staggered delay/start time for a sort of dominos effect.
• It makes animating transforms like scale, skew and rotate easy. At the same time it handles all the cross-browser junk enabling transforms all the way back to IE6.
• You can animate any numeric value of any object, not just CSS properties. This means that Greensock can animate custom JavaScript objects or work in conjunction with HTML5 Canvas or Raphael.js (For animated vector graphics). It’s extremely flexible in that sense.
• Great easing modes built right in. You don’t need to include any other files, just load up TweenMax.min.js and you have everything you need.

On top of that I’d argue that Greensock has a much better syntax. You can even choose wether or not you want it to be Object Oriented.

<section id="canvas">
    <div id="box"></div>
</section>

var $box = $('#box');

function moveBox(e) {
	var x = e.pageX,
		y = e.pageY;

	TweenMax.to($box, 1.4, {
		css: { left: x, top: y, scale: Math.random() * 2 + 1 },
		ease:Elastic.easeOut
	});
}

$(window).on('click', moveBox);

This is exactly the same code as above, except we use listen for the mousemove event rather than a click.

<section id="canvas">
    <div id="box"></div>
</section>

var $box = $('#box');

function moveBox(e) {
	TweenLite.to($box, 0.7, { css: { left: e.pageX, top: e.pageY }});
}

$(window).on('mousemove', moveBox);

Here I’m animating the custom property ‘currVal’ of a normal JavaScript object which then updates the number . Notice how easing still works.

<form id="number-input" action="">
    <input type="number" value="2500" />
    <button id="animate">Animate</button>
</form>

var	$text	= $('p.number'),
	$input	= $('input[type=number]'),
	endVal	= 0,
	currVal	= 0,
	obj	= {};

obj.getTextVal = function() {
	return parseInt(currVal, 10);
};

obj.setTextVal = function(val) {
	currVal = parseInt(val, 10);
	$text.text(currVal);
};

obj.setTextVal(0);

var animate = function(e) {
	e.preventDefault();
	currVal = 0; // Reset this every time
	endVal = $input.val();

	TweenLite.to(obj, 7, {setTextVal: endVal, ease: Power2.easeInOut});
};

$('#number-input').on('submit', animate);

Here I’m using the mouse position to control the progress (or playhead) of the entire animation.

<section id="canvas">
    <span>W</span>
    <span>o</span>
    <span>o</span>
    <span>o</span>
    <span>o</span>
    <span>t</span>
    <span>!</span>
    <span>!</span>
</section>

var $letters	= $('.text span'),
	tl	= new TimelineMax({paused: true});

tl.staggerFrom($letters, 1.5, {
	css: {alpha: 0, top: "-300", scale: 0, rotation: -20}, 
	ease: Elastic.easeOut
}, 0.2);

$(window).on('mousemove', function(e) {
	var prog = e.pageX / window.innerWidth;
	tl.progress(prog);
});