The TweenJS Javascript library provides a simple but powerful tweening interface. It supports tweening of both numeric object properties & CSS style properties, and allows you to chain tweens and actions together to create complex sequences.

Simple Tween

This tween will tween the target's alpha property from 0 to 1 for 1000ms (1 second) then call the handleComplete function.

    target.alpha = 0;
    createjs.Tween.get(target).to({alpha:1}, 1000).call(handleComplete);
    function handleComplete() {
        //Tween complete
    }

Arguments and Scope Tween also supports a call() with arguments and/or a scope. If no scope is passed, then the function is called anonymously (normal JavaScript behaviour). The scope is useful for maintaining scope when doing object-oriented style development.

 createjs.Tween.get(target).to({alpha:0})
     .call(handleComplete, [argument1, argument2], this);

Chainable Tween

This tween will wait 0.5s, tween the target's alpha property to 0 over 1s, set it's visible to false, then call the handleComplete function.

    target.alpha = 1;
    createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);
    function handleComplete() {
        //Tween complete
    }

Browser Support

TweenJS will work in all browsers.