Morphing Script.aculo.us




I’m not sure if many of you have heard of Script.aculo.us before but it is often the code used to provide Web 2.0 styled effects. Usually you’ll find it implemented in expandable/collapsible menus where it applies a sliding effect to the menu instead of just disappearing right away, so Script.aculo.us basically smooths out animations. Of course, it can handle more than just menus and you should checkout the demo page for more examples of where it would be useful (different examples are listed in the right column).

I have considered using it in the expanding/collapsing sidebar elements that this site has but the downside is that it will eat up some bandwidth. Depending on the effects that you want to use it could total over 100KB of additional downloads required for every visitor on the site. If you just want a sliding effect to collapsible menus then that isn’t quite so bad and will typically just use around 15KB.

The newest version of Scrip.aculo.us, version 1.7 Beta, is throwing in even more effects that could change the way websites present information to us. Now there are two new morphing effects and one transformation effect that is sure to make any site look professional. This site has setup a demo so that you can see the three different effects in action along with how you can implement them yourselves.

The transitions are so unbelievably smooth that it feels like something you would see in a PowerPoint presentation and not on a website. I can almost guarantee you that you’ll refresh the page at least once so that you can try each of the effects again. I’ve refreshed the page well over 10 times.