YUI Library Examples: Animation: Reversing an Animation

Animation: Reversing an Animation

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

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

Using the NodeFX Plugin

For this example, we will use Node's fx plugin to animate the element. The plugin adds the anim instance to the Node instance, pre-configuring it to use the Node instance as the Anim's node. The plug method accepts a class to construct and an optional config to pass to the constructor.

Setting the from attribute to the expanded height of the element allows us to toggle the effect using the reverse attribute, which we will see below (from uses current value when omitted).

var module = Y.get('#demo');
 
// add fx plugin to module body
var content = module.query('.yui-bd').plug(Y.Plugin.NodeFX, {
    from: { height: 0 },
    to: {
        height: function(node) { // dynamic in case of change
            return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
        }
    },
 
    easing: Y.Easing.easeOut,
    from: { height: 0 },
    duration: 0.5
});

var module = Y.get('#demo');
 
// add fx plugin to module body
var content = module.query('.yui-bd').plug(Y.Plugin.NodeFX, {
    from: { height: 0 },
    to: {
        height: function(node) { // dynamic in case of change
            return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
        }
    },
 
    easing: Y.Easing.easeOut,
    from: { height: 0 },
    duration: 0.5
});

Creating the Control Element

Because our behavior only works when JS is available, let's go ahead and add our control element using JS as well.

// use dynamic control for dynamic behavior
var control = Y.Node.create(
    '<a title="show/hide content" class="yui-toggle">' +
        '<em>toggle</em>' +
    '</a>'
);
 
// append dynamic control to header section
module.query('.yui-hd').appendChild(control);

// use dynamic control for dynamic behavior
var control = Y.Node.create(
    '<a title="show/hide content" class="yui-toggle">' +
        '<em>toggle</em>' +
    '</a>'
);
 
// append dynamic control to header section
module.query('.yui-hd').appendChild(control);

Toggling Animation Behavior

Before calling run in our click handler, we will use the reverse attribute toggle the direction of the animation depending on whether its opening or closing.

var onClick = function(e) {
    module.toggleClass('yui-closed');
    content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse
};

var onClick = function(e) {
    module.toggleClass('yui-closed');
    content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse
};

Running the Animation

Finally we add an event handler to run the animation.

module.query('.yui-toggle').on('click', onClick);

module.query('.yui-toggle').on('click', onClick);

Full Script Source

YUI().use('anim', function(Y) {
    var module = Y.get('#demo');
 
    // add fx plugin to module body
    var content = module.query('.yui-bd').plug(Y.Plugin.NodeFX, {
        from: { height: 0 },
        to: {
            height: function(node) { // dynamic in case of change
                return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
            }
        },
 
        easing: Y.Easing.easeOut,
        duration: 0.5
    });
 
    var onClick = function(e) {
        module.toggleClass('yui-closed');
        content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse
        content.fx.run();
    };
 
    // use dynamic control for dynamic behavior
    var control = Y.Node.create(
        '<a title="show/hide content" class="yui-toggle">' +
            '<em>toggle</em>' +
        '</a>'
    );
 
    // append dynamic control to header section
    module.query('.yui-hd').appendChild(control);
    control.on('click', onClick);
});

YUI().use('anim', function(Y) {
    var module = Y.get('#demo');
 
    // add fx plugin to module body
    var content = module.query('.yui-bd').plug(Y.Plugin.NodeFX, {
        from: { height: 0 },
        to: {
            height: function(node) { // dynamic in case of change
                return node.get('scrollHeight'); // get expanded height (offsetHeight may be zero)
            }
        },
 
        easing: Y.Easing.easeOut,
        duration: 0.5
    });
 
    var onClick = function(e) {
        module.toggleClass('yui-closed');
        content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse
        content.fx.run();
    };
 
    // use dynamic control for dynamic behavior
    var control = Y.Node.create(
        '<a title="show/hide content" class="yui-toggle">' +
            '<em>toggle</em>' +
        '</a>'
    );
 
    // append dynamic control to header section
    module.query('.yui-hd').appendChild(control);
    control.on('click', onClick);
});