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:

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:

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:

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.