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>