The Karma Project: Code Less, Teach More

May 7, 2009

animation with jQuery

Filed under: Uncategorized — subzero @ 7:15 am


I have been trying to remade one of the OLE-Nepal activities : “Can And Can’t”

"can and can't" activity

"can and can't" activity snapshot

It seems a little basic, well, I thought it at the begining.
so, after reading how to…tutorials about jQuery and (still reading) “jQuery in Action” book I didn’t found jQuery *really* useful but I must admit that I’m influenced by processingjs.

jQuery has an “animate” function, but seems pretty basic: it’s focused in text/class animation, not properly images. *All* I can do is to “move” objects whitin an area, the good part is that it supports relative moves (+/- number) the bad part is that it only moves in a straight line, the code looks like:

$(".object").<strong class="selflink">animate</strong>( {"right" : "+=10px"}, "slow"); 

What about easing equations?, what about a trajectories?…

So, if that does not exist.. we must develop it 🙂 so we’re currently thinking what is the best to do:

  1. to develop a animation tool from scratch
  2. to extend jQuery (the animation tool)
  3. to use processingjs

He bad thing about processingjs is that it’s very demanding (talking about performance), so what can we expect in a XO? (ps if you have one, please run some of its demos and talk to us).

What do you think?. byt the way we’re not trying to reinvent the wheel.


And the Winner is . . . jQuery!

Filed under: Uncategorized — bryanwb @ 5:38 am

We (Bryan + Felipe) had our weekly GSoC status meeting this morning. The primary issue of discussion was which javascript library we would build on top of for Karma. Over the last two weeks, we have been evaluating different libraries. Long story short, jQuery won by a mile. That said, jQuery and all other javascript libraries we evaluated fell far short in animation support.

Here is a quick rundown of the evaluation process. Initially, we wanted to test out the 3 most popular javascript libraries by creating a prototype animation in each. We looked at the list of popular frameworks and jQuery, dojo, extjs, mootools jumped out at us. My good friend Christopher Marin recommended extjs for its excellent GUI widgets but mentioned that it has a strange license that isn’t quite open-source. Next, Chris J. Ball notified us that Fedora will not allow extjs in fedora packages because extjs apparently uses GPLv3 with a special use clause. This instantly crossed extjs off our list.

Mootools looked interesting but it just didn’t seem to have the traction or community that jQuery or dojo have. Then there were two, dojo and jQuery.

To choose a javascript library we defined our criteria list:

  • technically good
  • active community
  • good leader
  • nice extension mechanism
  • unobtrusive javascript (added later)

what can we say?, uhh,  is widespread evidence that both are excellent tools.

Dojo wins with widgets (called dijits: progress bars, buttons, scroll bars, window alerts, datepickers, dialogs, skins…and so on)  jQuery has their not so large jQuery UI. About the community, jQuery has a impressive healthy and thriving community of people looking to making it better and we can’t forget the leader and geniuos  behind this library: John Resig.One more point in favor of jQuery is its awesome unobtrusive javascript design (the main idea is to separate the behavior from the structure)  jQuery have focused on easily achieve it.

About the extension mechanism, jQuery shows a nice view -at this moment we haven’t made a plugin-. Even it allows multiple javascript libraries and avoids the conflicts using the jQuery.noConflict()

So, the results (drums)….jQuery is the winner!!

If you have any advice, it’s the current time to say it.

Thanks for reading.

Create a free website or blog at