YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation: Chaining Animations Using the `end` Event

## Animation: Chaining Animations Using the `end` Event

This demonstrates how to use the `end` event to chain animations runs together.

Click the X in the header to fade the element out, then shrink its height to zero.

View example in new window.

#### Animation Demo

x

This an example of what you can do with the YUI Animation Utility.

Follow the instructions above to see the animation in action.

This is placeholder text used to demonstrate how the above animation affects subsequent content.

### 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>

<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 and the `to` attribute containing the properties to be transitioned and final values.

    var anim = new Y.Anim({    node: '#demo',    to: {        opacity: 0    }});

    var anim = new Y.Anim({
        node: '#demo',
        to: {
            opacity: 0
        }
    });

var anim = new Y.Anim({ node: '#demo', to: { opacity: 0 } });

### Handling the End Event

We will need a function to run when the `end` event fires. Note that the context of our handler defaults to `anim`, so `this` refers to our Anim instance inside the handler.

    var onEnd = function() {    this.unsubscribe('end', onEnd);    this.setAttrs({        to: { height: 0 },        easing: Y.Easing.bounceOut    });    this.run();};

    var onEnd = function() {
        this.unsubscribe('end', onEnd);
        this.setAttrs({
            to: { height: 0 },
            easing: Y.Easing.bounceOut
        });
        this.run();
    };

var onEnd = function() { this.unsubscribe('end', onEnd); this.setAttrs({ to: { height: 0 }, easing: Y.Easing.bounceOut }); this.run(); };

### Listening for the End Event

Now we will use the `on` method to subscribe to the `end` event, passing it our handler.

    anim.on('end', onEnd);

    anim.on('end', onEnd);

anim.on('end', onEnd);

### Running the Animation

Finally we add an event handler to run the animation.

    Y.get('#demo .yui-remove').on('click', anim.run, anim);

    Y.get('#demo .yui-remove').on('click', anim.run, anim);

Y.get('#demo .yui-remove').on('click', anim.run, anim);

### Full Script Source

    YUI().use('anim', function(Y) {    var anim = new Y.Anim({        node: '#demo',        to: { opacity: 0 }    });     var onEnd = function() {        this.unsubscribe('end', onEnd);        this.setAttrs({            to: { height: 0 },            easing: Y.Easing.bounceOut        });        this.run();    };     anim.on('end', onEnd);     Y.get('#demo .yui-remove').on('click', anim.run, anim); });

    YUI().use('anim', function(Y) {
        var anim = new Y.Anim({
            node: '#demo',
            to: { opacity: 0 }
        });

        var onEnd = function() {
            this.unsubscribe('end', onEnd);
            this.setAttrs({
                to: { height: 0 },
                easing: Y.Easing.bounceOut
            });
            this.run();
        };

        anim.on('end', onEnd);

        Y.get('#demo .yui-remove').on('click', anim.run, anim);

    });

YUI().use('anim', function(Y) { var anim = new Y.Anim({ node: '#demo', to: { opacity: 0 } }); var onEnd = function() { this.unsubscribe('end', onEnd); this.setAttrs({ to: { height: 0 }, easing: Y.Easing.bounceOut }); this.run(); }; anim.on('end', onEnd); Y.get('#demo .yui-remove').on('click', anim.run, anim); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

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