57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<div class="intro">

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff <p>This demonstrates how to animate the position of an element along a <code>curve</code>.</p>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff <p>Click anywhere on the gray box below and the little orange box will move to the click position.</p>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff</div>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<div class="example">

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff{{>curve-source-old}}

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff</div>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<h2>Setting up the HTML</h2>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<p>First we add some HTML to animate.</p>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<div id="demo-stage">

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff <span id="demo"></span>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff</div>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<h2>Creating the Anim Instance</h2>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<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>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniffvar node = Y.one('#demo');

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniffvar anim = new Y.Anim({

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff node: node,

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff duration: 1.5,

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff easing: Y.Easing.easeOut

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff});

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<h2>Changing Attributes</h2>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<p>A click handler will set the <code>to</code> value before <code>run</code> is called.</p>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniffvar onClick = function(e) {

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff anim.set('to', {

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff curve: randomCurve([e.pageX, e.pageY])

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff });

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff anim.run();

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff};

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<h2>Running the Animation</h2>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<p>Finally we add an event handler to run the animation.</p>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff ConniffY.one('#demo-stage').on('click', onClick);

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff<h2>Complete Example Source</h2>

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff{{>anim-xy-source}}

57135c36536a2f81ce818f6a006f002261972244Jeff Conniff```