This demonstrates how to animate the position of an element along a curve.
Click anywhere on the gray box below and the little orange box will move to the click position.
Setting up the HTML
First we add some HTML to animate.
<div id="demo-stage">
<span id="demo"></span>
</div>
Creating the Anim Instance
Now we create an instance of Y.Anim, passing it a configuration object that includes the node we wish to animate.
var node = Y.one('#demo');
var anim = new Y.Anim({
node: node,
duration: 1.5,
easing: Y.Easing.easeOut
});
Changing Attributes
A click handler will set the to value before run is called.
var onClick = function(e) {
anim.set('to', {
curve: randomCurve([e.pageX, e.pageY])
});
anim.run();
};
Running the Animation
Finally we add an event handler to run the animation.
Y.one('#demo-stage').on('click', onClick);
Complete Example Source
<div id="demo-stage">
<span id="demo"></span>
</div>
<script type="text/javascript">
YUI().use('anim', function(Y) {
var anim = new Y.Anim({
node: '#demo',
duration: 0.5,
easing: Y.Easing.elasticOut
});
var onClick = function(e) {
anim.set('to', { xy: [e.pageX, e.pageY] });
anim.run();
};
Y.one('#demo-stage').on('click', onClick);
});
</script>