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.
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:
#animatoris ready on the page;
animate()method to the
onCompleteevent of the first animation to cause chaining;
animate()method to the button's
Here is the full script block for this example:
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.