--- layout: example ---

Animation

NWT ships with a simple and easy to use animation mechanism. Modern browsers receive CSS transitions.

Demo 1: Standard Animation

Click Me!

Usage

{% highlight js %} // Get the element var el = n.one('.myel') // Do the animation el.anim({'marginLeft':'600px', color:'#FF0000'}, 0.5) .wait(1) // After the first step, wait for one second .anim({'marginLeft':'0px', color:'#000'}, 0.5) // Reset the animation after 1 second {% endhighlight %}

Demo 2: Reversing an applied animation

A common use case is to reverse an applied animation on click.

Click Me!

Usage

{% highlight js %} // Get the element var el = n.one('.myel') // Do the animation el.on('click', function(e) { // PopAnim will either run the last animation in reverse and return true, or return false this.popAnim() || this.anim({'marginLeft':'600px', color:'#FF0000'}, 0.5) e.stop() }) {% endhighlight %}

Demo 3: Events

Anim Events

Event Description
anim:start This event fires immediately when the anim instance method is called.
anim:done This event is fired when the any animation is complete on the node.
anim:pop This event is fired at the end of an animation reversal using popAnim.
animppush This event fires whenever we push an animation onto the stack.
Click Me!

Event Log

Click the animation link above to see events being fired.


Demo 4: Chaining

Click me! Animate 2 Animate 3