6215N/A<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

6215N/A<div class="intro">

6215N/A <p>This demonstrates how to animate the <code>xy</code> position of an element.</p>

6215N/A <p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>

6215N/A</div>

6215N/A

6215N/A<div class="example">

6215N/A{{>anim-xy-source}}

6215N/A</div>

6215N/A

6215N/A<h3>Setting up the HTML</h3>

6215N/A<p>First we add some HTML to animate.</p>

6215N/A

6215N/A```

6215N/A<div id="demo-stage">

6215N/A <span id="demo"></span>

6215N/A</div>

6215N/A```

6215N/A

6215N/A<h3>Creating the Anim Instance</h3>

6215N/A<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>

6215N/A

6215N/A```

7102N/Avar anim = new Y.Anim({

7102N/A node: '#demo',

7102N/A duration: 0.5,

6215N/A easing: Y.Easing.elasticOut

6215N/A});

6215N/A```

6215N/A

6215N/A<h3>Changing Attributes</h3>

6215N/A<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>

6215N/A

6215N/A```

6215N/Avar onClick = function(e) {

6215N/A anim.set('to', { xy: [e.pageX, e.pageY] });

6215N/A anim.run();

6215N/A};

6215N/A```

6215N/A

6215N/A<h3>Running the Animation</h3>

6215N/A<p>Finally we add an event handler to run the animation when the document is clicked.</p>

6215N/A

6215N/A```

6215N/AY.one('document').on('click', onClick);

6215N/A```

6215N/A

6215N/A<h2>Complete Example Source</h2>

6215N/A```

6215N/A{{>anim-xy-source}}

6215N/A```

6215N/A