YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation: Animating XY Position

## Animation: Animating XY Position

This demonstrates how to animate the `xy` position of an element.

Click anywhere to move the element to your click position.

View example in new window.

### Setting up the HTML

First we add some HTML to animate.

    <div id="demo" class="yui3-module">    <div class="yui3-hd">        <h4>Animation Demo</h4>        <a title="remove module" class="yui3-remove"><em>x</em></a>    </div>    <div class="yui3-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="yui3-module">
        <div class="yui3-hd">
            <h4>Animation Demo</h4>
            <a title="remove module" class="yui3-remove"><em>x</em></a>
        </div>
        <div class="yui3-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="yui3-module"> <div class="yui3-hd"> <h4>Animation Demo</h4> <a title="remove module" class="yui3-remove"><em>x</em></a> </div> <div class="yui3-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
    });

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();
    };

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

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

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings