YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Animation Utility: Chaining Animations Using `onComplete`

# Animation Utility: Chaining Animations Using `onComplete`

A common use case for animation involves causing two or more animations to fire sequentially. This is known as chaining. It's easy to chain animations using the YUI Animation Utility's custom events.

In this example, a color animation is set to fire after an animation of position. Click the button below to start the sequence.

View example in new window.

Click here to begin the chained animations.
This element will animate position and then color when you click the button.

## Chaining Animations

Chaining animations is easy to achieve in YUI's Animation Utility using the custom events that are built into your Animation instances. Here, we'll use the `onComplete` event of one animation to kick off a second animation, creating a simple chain.

This example has the following dependencies:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/element/element-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/button/button-min.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation.js"></script>

In this example, we begin with to page elements: a YUI Button that will actuate the animation sequence and a simple `<div>` that will animate in position and then in color. Here's the markup for these elements:

<!--markup for YUI Button Control--> <span id="startAnim" class="yui-button yui-link-button"> <em class="first-child"> <a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a> </em> </span> <!--The animated element.--> <div id="animator"> This element will animate position and then color when you click the button. </div>

With these two elements in place, we can write our script. This script:

- Wraps itself in an onAvailable call so that it fires only when the element `#animator` is ready on the page;
- Creates the first animation instance, `move`;
- Creates the second animation instance, `changeColor`;
- Ties the second animation's `animate()` method to the `onComplete` event of the first animation to cause chaining;
- Sets up the button instance and ties the first animation's `animate()` method to the button's `click` event;
- Sets up some logging so that you can use the Logger display at right (if enabled) to see some of the events as they transpire (and see what their argument payloads are); note that this makes the animation much slower than it otherwise would be.

Here is the full script block for this example:

//Setup the example once the animator div is present //in the DOM. YAHOO.util.Event.onAvailable("animator", function() { //This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim("animator", { left: {from: 0, to:75} }, 1); //This is the second animation; it will fire //when the first animation is complete. var changeColor = new YAHOO.util.ColorAnim("animator", { backgroundColor: {to:"#ff0000"} }, 1); //Here's the chaining glue: We subscribe to the //first animation's onComplete event, and in //our handler we animate the second animation: move.onComplete.subscribe(function() { changeColor.animate(); }); //Here we set up our YUI Button and subcribe to //its click event. When clicked, it will //animate the first animation: var startAnim = new YAHOO.widget.Button("startAnim"); startAnim.subscribe("click", function() { move.animate(); }); //You can also make use of the onStart and onTween //custom events in Animation; here, we'll log all //of changeColor's custom events and peek at their //argument signatures: changeColor.onStart.subscribe(function() { YAHOO.log("changeColor animation is starting.", "info", "example"); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log("changeColor onTween firing with these arguments: " + YAHOO.lang.dump(o), "info", "example"); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log("changeColor onComplete firing with these arguments: " + YAHOO.lang.dump(o), "info", "example"); }); });

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Animation Utility Examples:

- Basic Animation
- Animation Easing
- Animating From a Given Value
- Using Custom Units for an Animation
- Animating Multiple Attributes
- Chaining Animations Using `onComplete`
- Animating Colors
- Animating Motion
- Animating Along a Curved Path
- Animated Scrolling
- Animating multiple elements with StyleSheet (included with examples for StyleSheet Utility)
- Glowing Button (included with examples for Button Control)
- Complex Application (included with examples for Layout Manager)

### More Animation Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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