YUI 3.x Home -

YUI Library Examples: Animation: Animation Easing

Animation: Animation Easing

This demonstrates how to use the easing attribute to change the behavior of the animation.

Click the icon in the header to shrink the element's height to zero with Y.Easing.backOut.

Animation Demo

toggle

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.

  1. <div id="demo" class="yui-module">
  2. <div class="yui-hd">
  3. <h4>Animation Demo</h4>
  4. <a title="remove module" class="yui-toggle"><em>-</em></a>
  5. </div>
  6. <div class="yui-bd">
  7. <p>This an example of what you can do with the YUI Animation Utility.</p>
  8. <p><em>Follow the instructions above to see the animation in action.</em></p>
  9. </div>
  10. </div>
<div id="demo" class="yui-module">
    <div class="yui-hd">
        <h4>Animation Demo</h4>
        <a title="remove module" class="yui-toggle"><em>-</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 final properties and their values.

  1. var anim = new Y.Anim({
  2. node: '#demo .yui-bd',
  3. to: { height: 0 },
  4. easing: Y.Easing.backIn
  5. });
var anim = new Y.Anim({
    node: '#demo .yui-bd',
    to: { height: 0 },
    easing: Y.Easing.backIn
});

Running the Animation

Finally we add an event handler to run the animation.

  1. var onClick = function(e) {
  2. e.preventDefault();
  3. anim.run();
  4. };
  5. Y.get('#demo .yui-toggle').on('click', onClick);
var onClick = function(e) {
    e.preventDefault();
    anim.run();
};
Y.get('#demo .yui-toggle').on('click', onClick);

Full Script Source

  1. YUI().use('anim', function(Y) {
  2. var anim = new Y.Anim({
  3. node: '#demo .yui-bd',
  4. to: { height: 0 },
  5. easing: Y.Easing.backIn
  6. });
  7.  
  8. var onClick = function(e) {
  9. e.preventDefault();
  10. anim.run();
  11. };
  12. Y.get('#demo .yui-toggle').on('click', onClick);
  13.  
  14. });
YUI().use('anim', function(Y) {
    var anim = new Y.Anim({
        node: '#demo .yui-bd',
        to: { height: 0 },
        easing: Y.Easing.backIn
    });
 
    var onClick = function(e) {
        e.preventDefault();
        anim.run();
    };
    Y.get('#demo .yui-toggle').on('click', onClick);
 
});

Copyright © 2009 Yahoo! Inc. All rights reserved.

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