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...?
Conversation
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!
Thanks for pointing that out. I've updated the article accordingly!
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.
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.
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!
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. :)
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.
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.
Whoa, this comment section is cool.
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]
There are libraries that arn't based on prototype. Mochikit looks pretty cool, for instance.
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
I'm with mochikit now, it rules!!!!!!!!!!!!!
Someone wanted me to check out this comment section
you should look at EXT (http://extjs.com/) it is another new library
@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!