Example: Easing Effects

Setting up the HTML

First we add some HTML to animate.

<div id="demo" class="yui3-module">
    <div class="yui3-hd">
        <h3>Easing Effects</h3>
        <a title="collapse element" class="yui3-toggle"><em>-</em></a>
    </div>
    <div class="yui3-bd">
        <p>Click the icon in the header to shrink the element's height to zero with the "backIn" effect.</p>
    </div>
</div>
<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p>

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 final properties and their values.

var anim = new Y.Anim({
    node: '#demo .yui3-bd',
    to: { height: 0 },
    easing: 'backIn'
});

Running the Animation

Finally we add an event handler to run the animation.

var onClick = function(e) {
    e.preventDefault();
    anim.run();
};
Y.one('#demo .yui3-toggle').on('click', onClick);

Complete Example Source

<div id="demo" class="yui3-module">
    <div class="yui3-hd">
        <h3>Easing Effects</h3>
        <a title="collapse element" class="yui3-toggle"><em>-</em></a>
    </div>
    <div class="yui3-bd">
        <p>Click the icon in the header to shrink the element's height to zero with the "backIn" effect.</p>
    </div>
</div>
<p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p> 


<script type="text/javascript">
YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo .yui3-bd',
        to: { height: 0 },
        easing: 'backIn'
    });

    var onClick = function(e) {
        e.preventDefault();
        anim.run();
    };
    Y.one('#demo .yui3-toggle').on('click', onClick);

});

</script>