e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

8bd9b02c76091e87124abd4afa3d798e637abb3cLuke Smith<div class="intro">

2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <p>This demonstrates how to animate the <code>xy</code> position of an element.</p>

2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith <p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>

2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith</div>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<div class="example">

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith{{>anim-xy-source}}

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith</div>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h3>Setting up the HTML</h3>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<p>First we add some HTML to animate.</p>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith```

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<div id="demo-stage">

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith <span id="demo"></span>

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith</div>

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith```

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<h3>Creating the Anim Instance</h3>

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate. We will set the <code>to</code> attribute later when then animation runs.</p>

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith```

a9d49e77274be440ba8447c626f31bbda9734091Luke Smithvar anim = new Y.Anim({

a9d49e77274be440ba8447c626f31bbda9734091Luke Smith node: '#demo',

a9d49e77274be440ba8447c626f31bbda9734091Luke Smith duration: 0.5,

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith easing: Y.Easing.elasticOut

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith});

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith```

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith

2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith<h3>Changing Attributes</h3>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<p>Next we need a <code>click</code> handler to set the <code>to</code> attribute for the <code>xy</code> behavior and run the animation.</p>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith

2443526ef32df6fc65a30dc74f4f91ee12562f6cLuke Smith```

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smithvar onClick = function(e) {

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith anim.set('to', { xy: [e.pageX, e.pageY] });

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith anim.run();

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith};

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith```

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h3>Running the Animation</h3>

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith<p>Finally we add an event handler to run the animation when the document is clicked.</p>

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith```

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke SmithY.one('document').on('click', onClick);

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith```

e8d16592842bdb884e0e4d938f334b6ac5b7cad0Luke Smith

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith<h2>Complete Example Source</h2>

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith```

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith{{>anim-xy-source}}

8bd9b02c76091e87124abd4afa3d798e637abb3cLuke Smith```

4e85040322b4e582739e575b71d0c6f3b9d5c415Luke Smith