Jump to Table of Contents

Anim

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>