YUI Makes Animating the DOM Easy

Despite being an Adobe fanboy, I never cared much for how the Spry framework handles things like animations. Seemed complex at the time for basic operations. At work, they have standardized on using the YUI framework. This has been great for me because I have always wanted to dive deeper into it and learn about its ins and outs. With that, I needed to do some basic fade animations for a User Interface I am working on.

I looked up the docs for the the animation package. After reading for a few minutes, I was blown away at how the YUI developers were able to execute such a powerful, customizable feature in a very simple way. First, you simply create an attributes object that contains the property you want to change (in our case it will be the opacity) and what you want to change it to:


var attributes = {
opacity: {to: 0}
}


Notice that a from attribute is not present. This is only because if from is not provided, YUI will perform the animation based on the current value of the attribute you are modifying.

Once you have your attributes object defined, animating your object is simple:


var myAnimObj = new YAHOO.util.Anim("myDiv", attributes);
myAnimObj.animate();


We instantiated a new Anim object by passing in a string of the id of the element we want to animate (note: a dom element object can also be passed), and the attributes object. Then we simply call the animate() method to play the animation.

Extremely simple and straightforward. On top of this, YUI, having the incredible event engine that it has, allows you to subscribe to events for onStart, onTween (which occurs on every frame), and onComplete providing limitless animation effects and chaining.

Be sure that when you try the examples above, that you have included the following files in your document head:




Finally, you must also create an element that you actually want to apply the animation with an id of “myDiv” for the above examples to work.