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:

1<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css">  
2 
3<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
4<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> 
5<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script> 
6<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation.js"></script> 
view plain | print | ?

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:

1<!--markup for YUI Button Control--> 
2<span id="startAnim" class="yui-button yui-link-button"
3    <em class="first-child"
4        <href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a> 
5    </em> 
6</span> 
7 
8<!--The animated element.--> 
9<div id="animator"
10    This element will animate position 
11    and then color when you click the  
12    button. 
13</div> 
view plain | print | ?

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:

1//Setup the example once the animator div is present 
2//in the DOM. 
3YAHOO.util.Event.onAvailable("animator"function() { 
4 
5    //This is the first animation; this one will  
6    //fire when the button is clicked. 
7    var move = new YAHOO.util.Anim("animator", { 
8        left: {from: 0, to:75} 
9    }, 1); 
10     
11    //This is the second animation; it will fire 
12    //when the first animation is complete. 
13    var changeColor = new YAHOO.util.ColorAnim("animator", { 
14        backgroundColor: {to:"#ff0000"
15    }, 1); 
16 
17    //Here's the chaining glue: We subscribe to the 
18    //first animation's onComplete event, and in  
19    //our handler we animate the second animation: 
20    move.onComplete.subscribe(function() { 
21        changeColor.animate(); 
22    }); 
23     
24    //Here we set up our YUI Button and subcribe to 
25    //its click event.  When clicked, it will 
26    //animate the first animation: 
27    var startAnim = new YAHOO.widget.Button("startAnim"); 
28    startAnim.subscribe("click"function() { 
29        move.animate(); 
30    }); 
31     
32    //You can also make use of the onStart and onTween 
33    //custom events in Animation; here, we'll log all 
34    //of changeColor's custom events and peek at their 
35    //argument signatures: 
36    changeColor.onStart.subscribe(function() { 
37        YAHOO.log("changeColor animation is starting.""info""example"); 
38    }); 
39 
40    changeColor.onTween.subscribe(function(s, o) { 
41        YAHOO.log("changeColor onTween firing with these arguments: " +  
42            YAHOO.lang.dump(o), "info""example"); 
43    }); 
44     
45    changeColor.onComplete.subscribe(function(s, o) { 
46        YAHOO.log("changeColor onComplete firing with these arguments: " +  
47            YAHOO.lang.dump(o), "info""example"); 
48    }); 
49}); 
view plain | print | ?

YUI Logger Output:

Logger Console

INFO 0ms (+0) 11:09:29 PM:

global

Logger initialized

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

More Animation Utility Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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