Greensock JavaScript Animation

There are 46 comments.

Greensock is a fantastic JavaScript animation framework that performs above and beyond everything else currently available to those of us working with web design.

Though only few people know of it in the JavaScript world it’s got a huge audience in the world Flash, where it’s about as widely used as jQuery is among JavaScript-folks.

The example ’3D-flip image gallery’ has been updated to use the newly added 3D features of Greensock. I’ve also added a couple of new example links.

Differences between jQuery and Greensock

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.

Examples

Here are a couple of examples demonstrating the core features of the Greensock Animation Platform. If you have any questions, please leave those in the comments below.

basic syntax


<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);
View demo

Mouse follower

Greensock mousefollow javascript animation example
In this example TweenMax is used to create a mouse-follow effect in 6 lines of code. It also shows you how awesome it is at overwriting tweens.

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);
View demo

Animating custom properties

Greensock custom property javascript animation example

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);
View demo

Controlling the animation playhead

Example of controlling progress of a Greensock javascript animation timeline

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);
});
View demo

More examples

Start learning Greensock now

I’d suggest you get started with Jump Start: GSAP to quickly wrap your head around the Greensock Animation Platform. Once you’re done with that check out these resources:

I’d love to see your creations so share them in the comments.

  • Pingback: More Signup bonuses

  • Mark Kevin Cardente Besinga

    hi sir.. what a nice gsap tutorial. if you dont mind can you please share a tutorial on DRAG THIS? its really cool sir.. i hope you can thanks

    • http://ahrengot.com/ Jens Ahrengot Boddum

      Hey Mark,

      I’m not going to go through and make a tutorial for this right now, but I can share with you the JavaScript files used to make this intro animation and slider.

      Feel free to add any questions to the files if you have any.

      IntroAnimation – CoffeeScript:
      https://gist.github.com/Ahrengot/6139362

      IntroAnimation – Compiled JavaScript:
      https://gist.github.com/Ahrengot/6139380

      • Mark Kevin Cardente Besinga

        thanks man. your really good and great thanks for sharing :)

  • Lab-mapp

    hi buddy, nice work with GSAP. Do you have some material about bezzier animation for js?

  • christine

    Hi still a beginner was wondering all the java code given do it actually work if i paste it in the microsoft visual studio when i run?hope u can reply

    • http://ahrengot.com/ Jens Ahrengot Boddum

      Hey Christine, it doesn’t matter which editor you use.

  • baponk smoker

    this awesome thanks.