Creating a Simple Animation

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

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:

<style type="text/css"> #demo { background:#ccc; overflow:hidden; /* so we can animate to zero width */ width:200px; } </style>

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

<div id="demo">Demo</div> <button id="demo-run">run</button>

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.

<script type="text/javascript"> var attributes = { width: { to: 0 } }; var anim = new YAHOO.util.Anim('demo', attributes); </script>

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:

<script type="text/javascript"> YAHOO.util.Event.on('demo-run', 'click', function() { anim.animate(); }); </script>

This is a basic example of the YUI Animation Utility.