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.



  1. AFAIK, you have three options for the technology behind animations:
    – HTML DOM (jQuery)
    – SVG
    – (processing.js)
    (There’s also stuff like O3D, but that’s not very useful in this case.)

    DOM animations tend to be messy, inconsistent and slow. The DOM was not made for stuff like this and it sucks in general, anyway. You can’t get too far with DOM, but it may suit your needs. In this case, extending jQuery animations would be the best way.

    SVG should be very good for animations with all kinds of bells and whistles. There’s even this for manipulating the SVG DOM in a jQuery-ish fashin. The biggest problem with SVG is browser support. Speed could also be an issue.

    is very interesting. It was implemented in several leading browsers almost overnight because of its simplicity (it basically just exposes the drawing API of the browser to JS). It also tends to have very good performance, partly because much of the workload is in JS, which is getting faster all the time (JITs, threads in Gears and HTML5, etc.)
    The Bespin people decided to use for a text editor of all things and it seems to work fine for them.

    Comment by Lucian — May 7, 2009 @ 9:22 am

    • bah, wordpress didn’t escape my <canvas> tags. The third bullet and the third paragraph refer to it, anyway.

      Comment by Lucian — May 7, 2009 @ 10:15 am

      • Hi lucian,

        I have only seen simple SVG drawings, so look for something more complex I found several cliparts (,, SVG also supports animation (replacing gifs??)

        with this perspective the jQuery SVG plugin seems useful, just that I’m a bit concerned of the acceptance of Karma if we limit the animation to only SVG

        Comment by subzero — May 8, 2009 @ 4:56 am

      • I can’t figure out how to reply to your post, subzero.

        Anyway, if Karma’s animation needs aren’t very complex, it could support several back-ends. It’s probably outside the scope of GSoC, but it isn’t unfeasible.

        Comment by Lucian — May 8, 2009 @ 11:35 am

      • Anyway, if Karma’s animation needs aren’t very complex, it could support several back-ends. It’s probably outside the scope of GSoC, but it isn’t unfeasible.

        agreed, I’ll have to choose one.

        btw read this 🙂

        keep writing

        Comment by subzero — May 8, 2009 @ 7:23 pm

  2. If you choose to extend jquery, I would recommend you to ask the jquery development community about the best way to do so and, if possible, that it gets maintained as part of jquery.

    Comment by Tomeu Vizoso — May 7, 2009 @ 10:12 am

  3. Have you seen this jquery plugin?

    Comment by Carol Lerche — May 7, 2009 @ 3:03 pm

  4. Here is another javascript game engine:

    Here is another js game engine that is tile-based:

    Comment by Carol Lerche — May 7, 2009 @ 3:12 pm

  5. This is now open-sourced and understands the old Sierra adventure game resources:

    Comment by Carol Lerche — May 7, 2009 @ 3:19 pm

  6. Hi I’m the author gameQuery (the jQuery plugin mentioned by by Carol).

    This plugin use exclusively DOM, it works on IE but slowly. It provides an easy way to create and manipulate sprite animations, collision, (and transformation in the last version from svn) BUT it will NOT give you more way than jQuery to tune the sprite movement (i.e. no easing equations nor trajectories)

    That said don’t hesitate to take a look at the demos to see what can be achieved: and ask me if you have any questions.

    Comment by Selim — May 11, 2009 @ 3:44 pm

    • Hi Selim!,

      IE is is out of our interest, at least it’s not primordial four us.
      We’re focusing in getting simple animation with the above features, maybe you could give us your approach or advice about that.

      Thanks for your reply.

      btw. Really good job. I like the collision demo, it’s faster with chrome that firefox.

      Comment by subzero — May 13, 2009 @ 9:50 pm

  7. […] the past post I tell you about “can and can’t” audio troubles. And here I tell you about animation problems using jQuery. The final “can and can’t” […]

    Pingback by Animation with JavaScript: that little beast « Karma Project Learn.Teach.Everything — June 9, 2009 @ 2:54 am

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Blog at

%d bloggers like this: