#

Jump to Table of Contents

# Anim

The Anim Utility provides the ability to animate changes to style properties. Advanced easing equations are provided for more interesting animated effects.

NOTE: Depending on which features are required, you may want to consider using the Transition Utility as an alternative to Anim. The Transition Utility isn't as feature rich as Anim, but it leverages native CSS Transitions when possible, provides a smaller payload, and can be hardware-accelerated.

## Getting Started

To include the source files for Anim and its dependencies, first load the YUI seed file if you haven't already loaded it.

    <script src="http://yui.yahooapis.com/3.10.3/build/yui/yui-min.js"></script>

Next, create a new YUI instance for your application and populate it with the modules you need by specifying them as arguments to the `YUI().use()` method. YUI will automatically load any dependencies required by the modules you specify.

    <script>
    // Create a new YUI instance and populate it with the required modules.
    YUI().use('anim', function (Y) {
        // Anim is available and ready for use. Add implementation
        // code here.
    });
    </script>

For more information on creating YUI instances and on the `use()` method, see the documentation for the YUI Global Object.

### Creating an Animation Object

Your Animation implementation will consist of one or more instances of the `Anim`.

To create an `Anim` instance on your page, pass it a configuration object including the `node` or selector query for the node that you wish to animate and a `to` containing the properties you wish to animate.

    var myAnim = new Y.Anim({
        node: '#demo',
        to: {
            width: 0,
            height: 0
        }
    });

To begin the actual animation, call the `run` method on your `Anim` instance.

    myAnim.run();

See the API documentation for the Anim object for more information about its methods and properties.

## Using Animation

### Accessing Animation Attributes

In addition to passing a configuration object to the `Anim` constructor, you can access the attributes of your `Anim` instance via the `set` and `get` methods.

    var myAnim = new Y.Anim({
        node: '#demo',
        to: {
            width: 0,
            height: 0
        }
    });

### Setting a To Value

A `node` attribute and a `to` attribute containing one or more properties to animate are the minimum requirements for running an animation.

The value of a `to` can optionally be a function. If a function is used, it receives the `node` as its only argument. The return value of the function becomes the `to` value for that `run` of the animation.

    var myAnim = new Y.Anim({
        node: '#demo',
        to: {
            width: function(node) {
                return node.get('offsetWidth') / 2;
            },
            height: 0
        }
    });

### Setting a From Value

Use the optional `from` attribute to start the animation from a specific value. When `from` is omitted, the current value is used.

Like the `to` attribute, the value of a `from` property can optionally be a function. If a function is used, it receives the `node` as its only argument. The return value of the function becomes the `from` value for that `run` of the animation.

    var myAnim = new Y.Anim({
        node: '#demo',
        from: {
            width: 0,
            height: function(node) {
                return node.get('winHeight');
            }
        },

        to: {
            width: 0,
            height: 0
        }
    });

### Listening for Events

The Animation Utility defines events useful for hooking into the various stages of an animation. The `on` method is used to attach event listeners.

    var myAnim = new Y.Anim({
        node: '#demo',
        to: {
            width: 0,
            height: 0
        }
    });

    myAnim.on('end', function() {
        myAnim.get('node').addClass('yui-hidden');
    });