Tuesday, September 25, 2012

Fast Javascript Animation using GreenSock's TweenLite Library

HTML5 compliant browsers are steadily replacing all the old non-compliant browsers.  Microsoft finally caught up with IE9 and you can start to count on the technology to be available.   Eventually, being forever backwards compatible with the old will be a thing of the past.  As that happens, we want to see what our new toys can do and how far we can push them.  One area that will see change is moving from Flash-based animations to HTML5-based animations.  However, for that to happen, browsers and their supporting libraries will need to be able to match the performance and functionality of their Flash counterpart.

If you've spent anytime with jQuery, you may have tinkered with the animation engine to perform various effects on the elements on your page.  If you've really played with jQuery, you might have tried to coordinate the animation of a pile of elements on your page only to be disappointed by the performance.  Luckily, this is not an inherent issue with browser technology, its just a matter of using the right library for the job.  jQuery's animation engine does very well with basic transition effects.  However, if you trying to build the next great game using all the latest HTML5 goodies, you're going to need something a bit more robust.  This is where GreenSock's TweenLite library comes in.  Built specifically for animation, this tool has a nice array of features to make animating a breeze.  In one line, you can animate any element on your page:

// myBox is a div that is styled to be 80px wide and 50px tall

TweenLite.to(document.getElementById('myBox'), 2, {css: {width: 150, height: 100});

Over the course of 2 seconds, my box will go from 80x50px to 150x100px.  The library supports a nice array of easing functions, start/step/stop callbacks, and various other playback control method.

If you'd like to use jQuery with TweenLite, its very simple - instead of getElementById(), you can use a selector:

TweenLite.to($('#myBox'), 2, {css: {width: 150, height: 100});

Notice that you can pass the jQuery object and TweenLite understands how to use it.  If you want to change the animated variable on a collection of items, you can use $.each to run the animation on each element:

$('.box').each(function (i, el)
TweenLite.to(el, 2, {css: {width: 50*(i+1), height: 100});

Here I changed the final width of each element based on its index in the collection. The first element will animate to 50px, the second to 100px, and so on. You can get a lot more fancy than that - I created a demo in my sandbox that illustrates the use of several callback functions, CSS3 transforms, and most of the easing functions.

In summary, here's my take of the library:

  • Fast (see the speed test) - if your project has a lot of things moving, this library can keep everything going nice and smooth.

  • Small - everything is modularized so you can get started with only a 9Kb footprint.  From there, you can add in the pieces you need.  The CSS plugin does add another 16Kb so if you're just doing a few basic CSS animations, you might consider animating a dummy property and use the onAnimate callback to set the styles directly on the element

  • CSS3 Transform support - the CSS plugin handles all the CSS3 transform function like rotate, skew, etc.  In jQuery, you would need Transit and then use the transition() method to do the same.

  • No dependencies - no other library other than plain old Javascript are needed.

  • Roots in Flash - GreenSock has been building ActionScript libraries and all the familiar concepts of animating in Flash are here like timelines, play head, etc.  If you're making the transition from Flash to HTML5, TweenLite will have a similar look and feel.

  • Not MIT/GPL licensed - pay attention to the terms of use before building something with the library.  For the most part, you can use it for free. Just make sure you're inside the bounds of the terms, otherwise, you'll need to buy a license. However, its a reasonable fee and may be worth the investment regardless of how you use it because of some of the extra goodies you get.

  • Really new - the Javascript version of the library just came out in v12 which is still in beta.  However, since its based on the ActionScript versions, it should be fairly stable.

  • Not a jQuery plugin - if you're looking for a jQuery.animate() equivalent, this is not implemented that way. However, the approach provides much greater control and versatility than you might be able to achieve when using the jQuery plugin approach. This becomes most apparent as you start using the TimelineLite object.

Sometimes using the right tool for the job is a necessity.  TweenLite is only an animation engine.  It doesn't try to be anything else.  While other libraries that provide DOM selecting and traversal (like jQuery) do have built-in animation capabilities, some projects will need the enhanced speed and features of TweenLite to really leverage the full capabilities of the browser. This is really a great library that I have only started to tinker with. I'm excited to try out some of the other features it offers and will post some demos as I continue working with the library.