1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<link href="{{componentAssets}}/anim.css" rel="stylesheet" type="text/css">

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="intro">

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p>This demonstrates how to animate the position of an element along a <code>curve</code>.</p>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney <p> Click anywhere to move the element to your click position.</p>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney</div>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<div class="example">

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>curve-source}}

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney</div>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Setting up the HTML</h2>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>First we add some HTML to animate.</p>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<span id="demo"></span>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Creating the Anim Instance</h2>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<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>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar node = Y.one('#demo');

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar anim = new Y.Anim({

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney node: node,

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney duration: 1.5,

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney easing: Y.Easing.easeOut

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney});

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Changing Attributes</h2>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>A click handler will set the <code>to</code> value before <code>run</code> is called.</p>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeneyvar onClick = function(e) {

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney anim.set('to', {

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney curve: randomCurve([e.pageX, e.pageY])

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney });

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney anim.run();

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney};

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Running the Animation</h2>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<p>Finally we add an event handler to run the animation.</p>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt SweeneyY.one('document').on('click', onClick);

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney<h2>Complete Example Source</h2>

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney{{>anim-xy-source}}

1f08a8488664773a7d96fa3a043a639692d2a5cbMatt Sweeney```