Animation Chaining in YUI

Question

<div id="demo" class="yui3-module">
<a href="" title="fade out element" class="yui3-remove">Click to animate</a>
</div>
<script src="js/yui-min.js"></script>
<script type="text/javascript">
YUI().use('anim', function(Y) {
var anim = new Y.Anim({
    node: '#demo',
    to: { width: 500, height: 300 }
});
var anim2 = new Y.Anim({
    node: '#demo',
    to: { width: 100, height: 100 }
});

var onClick = function(e) {
    e.preventDefault(); 
    anim.run();
anim2.run(); //how to run anim2 ???
};
Y.one('#demo .yui3-remove').on('click', onClick);
});

How to run the next anim2 after anim.run has ocurred i.e as a chain. Is there any simple way to do this. ??

Answer 1

You can run an animation after another one by listening to the first one's end event.

anim.on('end', function () {
  anim2.run();
});

This is a bit easier to do when using Transition. Instead of creating instances of Anim you can just call node.transition() and use a callback.

YUI().use('node', 'transition', function (Y) {
  Y.one('#demo .yui3-remove').on('click', function (e) {
    e.preventDefault();
    Y.one('#demo').transition({ width: 500, height: 300 }, function () {
      this.transition({ width: 100, height: 100 });
    });
  });
});