---
layout: example
---
Animation
NWT ships with a simple and easy to use animation mechanism. Modern browsers receive CSS transitions.
Demo 1: Standard Animation
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.
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. |
Event Log
Click the animation link above to see events being fired.
Demo 4: Chaining