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

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

10139N/A <p>This demonstrates how to animate the position of an element along a <code>curve</code>.</p>

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

10139N/A</div>

10139N/A

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

10139N/A{{>curve-source}}

10139N/A</div>

10139N/A

20895N/A<h2>Setting up the HTML</h2>

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

10139N/A```

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

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

10139N/A</div>

18688N/A```

18688N/A

10139N/A<h2>Creating the Anim Instance</h2>

19013N/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.</p>

10139N/A

12695N/A```

19140N/Avar node = Y.one('#demo');

10139N/A

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

13685N/A node: node,

10139N/A duration: 1.5,

20857N/A easing: Y.Easing.easeOut

16401N/A});

10139N/A```

10139N/A

10139N/A<h2>Changing Attributes</h2>

10139N/A<p>A click handler will set the <code>to</code> value before <code>run</code> is called.</p>

10139N/A

20239N/A```

16401N/Avar onClick = function(e) {

10139N/A anim.set('to', {

10139N/A curve: randomCurve([e.pageX, e.pageY])

10139N/A });

10139N/A anim.run();

10139N/A};

10139N/A```

10139N/A

10139N/A<h2>Running the Animation</h2>

10139N/A<p>Finally we add an event handler to run the animation.</p>

10139N/A

20857N/A```

10139N/AY.one('#demo-stage').on('click', onClick);

10139N/A```

10139N/A

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

10139N/A```

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

10139N/A```

10139N/A