#

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>