YUI Library Examples: Animation: Animating XY Position

Animation: Animating XY Position

Setting up the HTML

First we add some HTML to animate.

<div id="demo" class="yui-module">
    <div class="yui-hd">
        <h4>Animation Demo</h4>
        <a title="remove module" class="yui-remove"><em>x</em></a>
    </div>
    <div class="yui-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>
</div>

<div id="demo" class="yui-module">
    <div class="yui-hd">
        <h4>Animation Demo</h4>
        <a title="remove module" class="yui-remove"><em>x</em></a>
    </div>
    <div class="yui-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>
</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. We will set the to attribute later when then animation runs.

var anim = new Y.Anim({
    node: '#demo',
    duration: 0.5,
    easing: Y.Easing.elasticOut
});

var anim = new Y.Anim({
    node: '#demo',
    duration: 0.5,
    easing: Y.Easing.elasticOut
});

Changing Attributes

Next we need a click handler to set the to attribute for the xy behavior and run the animation.

var onClick = function(e) {
    anim.set('to', { xy: [e.pageX, e.pageY] });
    anim.run();
};

var onClick = function(e) {
    anim.set('to', { xy: [e.pageX, e.pageY] });
    anim.run();
};

Running the Animation

Finally we add an event handler to run the animation when the document is clicked.

Y.get('document').on('click', onClick);

Y.get('document').on('click', onClick);

Full Script Source

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.get('document').on('click', onClick);
 
});

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.get('document').on('click', onClick);
 
});