JavaScript Effect Libraries

They're becoming all the rage: easy-to-use libraries that can make your application look sexy. Here's a short list to help you out:

moo.fx

Moo.fx is the newest one on the block and boasts a small 3KB footprint. Ignore for a minute that you need the 27KB footprint of Prototype to go along with that. All snarkiness aside, Prototype actually has a number of classes built into it that aren't required for what moo.fx needs. Be sure to remove anything that you don't need because 30KB seems quite large just for some animations.It requires the Prototype library but luckily comes with a streamlined version of it that's only 3KB instead of the usual 30KB.

Anyways, moo.fx excels at keeping it simple. There's a small set of nice animations like changing height, width and opacity of an object. You can even combine effects which is handy.

Script.aculo.us

Script.aculo.us, like moo.fx, is built upon the Prototype library but differs by building on top of the AJAX features also available in Prototype. It has also found its way into the Ruby on Rails framework. For this reason alone, expect to see this library to stick around.

Rico

Rico has been around for awhile and did NOT need the Prototype library. But after discovering that they were duplicating a lot of the same work, the Rico team has reworked their stuff to work off the Prototype base. If Prototype had licensing costs, they'd be making a mint by now! (no, not that mint.)

The largest limiting factor to all of these libraries is browser support. Since they all rely on the Prototype engine, you're limited to Internet Explorer 6, Mozilla 1.7+, Firefox 1.0+ or Safari 1.2+.

Walter Zorn

While a bit of a throwback to the good ol' days where fun libraries like these were called DHTML, check out Walter Zorn who has a few tricks up his sleeve. Drag and Drop, resizable images, a JavaScript graphics library and a plotting engine. Oh, I could see some Sparklines possibilities. His browser compatibility list is almost envious in comparison to the Prototype-based collection above, including such favourites as Netscape 4 and Internet Explorer 4.

The Future

With Web 2.0 in full swing, don't be surprised to see these libraries extended and others libraries find their way. Now, where did I put that mouse trailer script...?

Published October 28, 2005 · Updated September 14, 2006
Categorized as JavaScript
Short URL: https://snook.ca/s/442

Conversation

16 Comments · RSS feed
Valerio said on October 29, 2005

In the moo.fx package there's an already stripped down version of prototype, if you want to use moo.fx only. And it's just.. (guess) 3kb. Don't need to do that yourself!

Jonathan Snook said on October 29, 2005

Thanks for pointing that out. I've updated the article accordingly!

Derek said on October 29, 2005

Why build everything on prototype? Object.prototype.extend is a pain in the butt and if your trying to integrate any of this into a system that already has javascript there is a good chance it will be broken since if breaks for(var i in foo) which is a very common peice of code.

Kim Siever said on October 31, 2005

Moo.fx uses anchors in the URL. It's too bad their script didn't take advantage of that when the user uses the back button.

Si said on November 01, 2005

Thanks for making me aware of these libraries. I have been using many Web 2.0 applications of late and liked the way a lot of the forms and alerts were animated. I thought there must be a standard set of tools for this but haven't had the chance to do the research yet. You've saved me a lot of time!

ranvier said on November 01, 2005

Like Si, thanks for highlighting them here. I remembered the time when cut and past javascripts were the hot things in those days. (Though i think it should still be the case now?)

Now with "Web 2.0" becoming hotter and hotter, it seems (for me) to be getting lots and lots of things to pick up.

Yep, i agree that if you have the good foundation in (intermediate?) javascript knowledge, crossing from one side to another should not be difficult.

Also, somehow, i can't get rid of the notion of feeling a bit queasy when i'm use a pre-set library of codes that has been created instead of producing a set of codes by yourself. I just don't know why i have this thought. Do you? Lol~

Hmm...What do you think? Correct me if i'm wrong. :)

Windzero said on November 01, 2005

The links is great, thank you very much for providing those.

By the way, I like your web very much! The design and the techinique are both great.

Pat said on November 02, 2005

Ever since finding out about these libraries I've been trying to think of a way to stick them into my app at work.

The only snag is that it's government...and their common look for web is sitting firmly in the netscape 4.7 days. boo.

Rob said on November 09, 2005

Whoa, this comment section is cool.

MySchizoBuddy said on November 29, 2005

Any one knows how to change the dom walking javascript on moo.fx home page, so it works for the following structure

[div id="content"]
..[div class="entry"]
....[h3 /]
....[div /]
..[/div]
..[div class="entry"]
....[h3 /]
....[div /]
..[/div]
[/div]

Tim said on January 03, 2006

There are libraries that arn't based on prototype. Mochikit looks pretty cool, for instance.

Diego said on April 10, 2006

It isn't possible...when I look for some javascript code in the web I've always found somethink doesn't work...it's very very hard to find someone who can use javascript rightly

Brutus said on April 26, 2006

I'm with mochikit now, it rules!!!!!!!!!!!!!

manicsquirrel said on May 03, 2007

Someone wanted me to check out this comment section

gerald pierce said on May 11, 2007

you should look at EXT (http://extjs.com/) it is another new library

Jonathan Snook said on May 11, 2007

@gerald: since I originally wrote this, I've had the opportunity to use EXT and it's an incredible library. A little bulky but for web apps, you can't go wrong. Very solid!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.