Animators have two properties that control the style of the animation: duration and motion.

Duration

The duration property specifies how long the animation takes in milliseconds (i.e. use duration="1000" for a one-second animation). The default duration for an animation (if no duration attribute is specified) is 250 milliseconds, or 1/4 of a second. The "Slow" button above uses a two second duration:

        
    <j:Animator animatorId="anim1" duration="2000"
                propertyId="$left" to="100" relative="true"/>
    

Motion

The motion property controls the style of the motion. It can be one of "easeIn", "easeOut", "easeBoth", or "linear". The default is "easeBoth".

The "easeOut" motion starts fast and then slows down at the end.

        
    <j:Animator animatorId="anim2" motion="easeOut"
                propertyId="$left" to="100" relative="true"/>
    

Use "easeIn" to create an acceleration which starts slow and then pops at the end.

    <j:Animator animatorId="anim3" motion="easeIn"
                propertyId="$left" to="100" relative="true"/>
    

The default motion is "easeBoth", which does a traditional slow-in-slow-out animation. You can also use "linear", which uses no acceleration or deacceleration - the property changes at a constant rate.