YUI Library Home

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.

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:

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

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