Animation Examples

Package

Package anim.js is composed of Animation.js and StyleTransition.js

anim.js:

    Animation
            |
            + StyleTransition

Animation is purely a timing mechanism. To achieve CSS transition effects, use StyleTransition.

Examples

• toggle( );
• Transitions - time based transitions
• seekTo( position )
• animation on a css rule

Tutorial Overview

First create an element in the HTML.

<div id="testNode" style="color: #9f7; background-color: #010;">change me</div>

(The styles do not need to be in an inline style attribute.)

Next, create a StyleTransition:

<script type='text/javascript>
var newStyle = { 
    color: "#600",
    backgroundColor: "#f53"
};

var anim = new APE.anim.StyleTransition(
    "testNode",
    newStyle,
    2, 
    APE.anim.Transitions["accel"]);
</script>