YUI Library Examples: StyleSheet Utility: Animating multiple elements with StyleSheet

Starting from the existing `<style>` node

This example includes a <style> element with some basic styling for the demo. We give the <style> element an id which we'll reference when we instantiate the StyleSheet instance.


1	<style id="demo_style" type="text/css">
2	.shrinky_dink {
3	overflow: hidden;
4	width: 450px;
5	}
6	.shrinky_dink div {
7	display: inline;
8	float: left;
9	background: #000;
10	margin: 1em;
11	height: 150px;
12	width: 150px;
13	opacity: 1,
14	filter: alpha(opacity=100);
15	}
16	</style>
17	...
18	<div id="demo">
19	<p>
20	<button type="button" id="demo_go">Start</button>
21	</p>
22	<div class="shrinky_dink">
23	<div></div>
24	<div></div>
25	<div></div>
26	<div></div>
27	<div></div>
28	<div></div>
29	</div>
30	</div>
	view plain \| print \| ?

Use the `onTween` event from an Anim instance

We'll just be using a raw instance of YAHOO.util.Anim to leverage its timers and event structure. In particular, we'll subscribe to its onTween and onComplete custom events.


1	YAHOO.util.Event.onDOMReady(function () {
2	// Default animation duration is 1 second
3	var anim = new YAHOO.util.Anim(),
4
5	// Modify the existing style node's stylesheet
6	sheet = new YAHOO.util.StyleSheet('demo_style'),
7
8	floor = Math.floor,
9	go = YAHOO.util.Dom.get('demo_go');
10
11
12	// Update the StyleSheet on each frame of the animation
13	anim.onTween.subscribe(function (type,data) {
14	// How far along in the animation are we?
15	var factor = data[0].duration / 1000,
16
17	dim = (150 - floor(100 * factor)) + 'px',
18	opacity = 1 - (0.8 * factor);
19
20	sheet.set('.shrinky_dink div', {
21	height : dim,
22	width : dim,
23	opacity: opacity // normalized across browsers
24	});
25	});
26
27	anim.onComplete.subscribe(function () {
28	go.disabled = false;
29	});
30
31	YAHOO.util.Event.on(go, 'click', function () {
32	go.disabled = true;
33	anim.animate();
34	});
35	});
	view plain \| print \| ?

YAHOO.util.Event.onDOMReady(function () {
        // Default animation duration is 1 second
    var anim  = new YAHOO.util.Anim(),

// Modify the existing style node's stylesheet
        sheet = new YAHOO.util.StyleSheet('demo_style'),

floor = Math.floor,
        go    = YAHOO.util.Dom.get('demo_go');

// Update the StyleSheet on each frame of the animation
    anim.onTween.subscribe(function (type,data) {
            // How far along in the animation are we?
        var factor  = data[0].duration / 1000,

dim     = (150 - floor(100 * factor)) + 'px',
            opacity = 1 - (0.8 * factor);

sheet.set('.shrinky_dink div', {
            height : dim,
            width  : dim,
            opacity: opacity    // normalized across browsers
        });
    });

anim.onComplete.subscribe(function () {
        go.disabled = false;
    });

YAHOO.util.Event.on(go, 'click', function () {
        go.disabled = true;
        anim.animate();
    });
});

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.

StyleSheet Utility Examples:

More StyleSheet Utility Resources:

User's Guide (external)
API Documentation