Animation
NWT ships with a simple and easy to use animation mechanism. Modern browsers receive CSS transitions.
Demo 1: Standard Animation
Usage
// 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
Demo 2: Reversing an applied animation
A common use case is to reverse an applied animation on click.
Usage
// 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()
})
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.