<div class="intro">
<p>This demonstrates how to animate the position of an element along a <code>curve</code>.</p>
<p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>
</div>
<div class="example">
{{>curve-source-old}}
</div>
<h2>Setting up the HTML</h2>
<p>First we add some HTML to animate.</p>
```
<div id="demo-stage">
<span id="demo"></span>
</div>
```
<h2>Creating the Anim Instance</h2>
<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.</p>
```
var node = Y.one('#demo');
var anim = new Y.Anim({
node: node,
duration: 1.5,
easing: Y.Easing.easeOut
});
```
<h2>Changing Attributes</h2>
<p>A click handler will set the <code>to</code> value before <code>run</code> is called.</p>
```
var onClick = function(e) {
anim.set('to', {
});
anim.run();
};
```
<h2>Running the Animation</h2>
<p>Finally we add an event handler to run the animation.</p>
```
Y.one('#demo-stage').on('click', onClick);
```
<h2>Complete Example Source</h2>
```
{{>anim-xy-source}}
```