HTML5 / JS

Flash

TweenLite

TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP). A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time. TweenLite can be used on its own to accomplish most animation chores with minimal file size or it can be used in conjunction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler.

Basic Usage

The most basic use of TweenLite would be to tween a numeric property of a generic JavaScript object.

var demo = {score:0},
scoreDisplay = document.getElementById("scoreDisplay");
//create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds.
//each time the tween updates call the function showScore() which will handle displaying the value of demo.score.
var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore})
function showScore() {
scoreDisplay.innerHTML = demo.score.toFixed(2);
}

TweenLite isn't limited to animating DOM elements, in fact it isn't tied to any rendering layer. It works great with canvas and WebGL too!

Control

TweenLite is packed with methods that give you precise control over every tween. Play, pause, reverse, and adjust the timeScale (speed) whenever you need to. The demo below shows the power of just a handful of TweenLite's methods.