Saturday, February 17, 2007

Yahoo! UI Library: Animation
This surely deserved much more attention than we're going to give it this morn. While yours truly is not a professional programmer, these look rather cool. Consider the shrinking bar demo. It takes just a div layout item; styled in this case as:
#demo {
background:#ccc;
font:100%/1.2em arial;
width:10px;
height:10px; }
...and animates it with two these lines:
var anim = new YAHOO.util.Anim('demo', 
{ width: { from: 30, to: 10, unit: 'em'} } );
YAHOO.util.Event.on(document, 'click',
anim.animate, anim, true);
Wuhu! the gray bar shrinks from 30 to 10 ems. In not much more code than it would take for the placeholder for a custom flash component.

I'll add that the library setup is superb. In one glance you can find the demos, cheat sheet, docs, downloads, everything. Very nicely done.

No comments: