YUI Library Examples: Animation Utility: Basic Animation

Creating a Simple Animation

The YUI Animation Utility makes adding animation effects to HTMLElements easy.

The first thing we need to do is load the Animation source file and dependencies:


1	<script type="text/javascript" src="../../../2.x/build/yahoo/yahoo.js"></script>
2	<script type="text/javascript" src="../../../2.x/build/dom/dom.js"></script>
3	<script type="text/javascript" src="../../../2.x/build/animation/animation.js"></script>
	view plain \| print \| ?

For this example, we will animate the width of the <div> element named demo.

Add a little style so that we can see the animation in action:


1	<style type="text/css">
2	#demo {
3	background:#ccc;
4	overflow:hidden; /* so we can animate to zero width */
5	width:200px;
6	}
7	</style>
	view plain \| print \| ?

Create the demo element and a button to run the animation:


1	<div id="demo">Demo</div>
2	<button id="demo-run">run</button>
	view plain \| print \| ?

Now we create an instance of YAHOO.util.Anim, passing it the element we wish to animate, and the style attribute(s) to be animated. Each attribute requires at least a to by field, which will be used as the ending value. A from field is optional; if omitted the animation starts from its current value.


1	<script type="text/javascript">
2	var attributes = {
3	width: { to: 0 }
4	};
5	var anim = new YAHOO.util.Anim('demo', attributes);
6	</script>
	view plain \| print \| ?

The final step is to call the animate method on our instance to start the animation. The button will be the trigger that begins the animation sequence:


1	<script type="text/javascript">
2	YAHOO.util.Event.on('demo-run', 'click', function() {
3	anim.animate();
4	});
5	</script>
	view plain \| print \| ?

This is a basic example of the YUI Animation Utility.

YUI Library Examples: Animation Utility: Basic Animation

Creating a Simple Animation

Animation Utility Examples:

More Animation Utility Resources: