YUI 3: Animation

Getting Started

Include Dependencies

To use the Animation Utility, include the YUI seed file:

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

Instantiating 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

This section describes how to use the Animation utility in further detail. It contains these subsections:

• Accessing Attributes
• Setting a To Value
• Setting a From Value
• Listening for Events

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 } }); myAnim.set('duration', 0.5); myAnim.set('easing', Y.Easing.easeOut);

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'); });

Support & Community