Wednesday, November 8th, 2006

MochiKit.Animator: New Animation in MochiKit

Category: JavaScript, Library

MochiKit.Animator is an enhanced*, fully vectorized version of Bernard Sumption’s animator.js. It eschews the use of classes and instead uses composition to build complex effects in one or two lines of code. The idea is to have everything work “right”. This means not having to specify start values, maximum efficiency during playback, and clean, automatic animation reversal. In other words, the goal is to make an animation library that doesn’t suck.”

There are plenty of examples including the rainbox sequence via:


  1. //define another animation constructor, using the object syntax this time
  2. invert = partial(cssAnimation,{'background-color':[null,'black'],'color':[null,'white']},{transition:transitions.pulse});
  4. //these don't know about each other yet.
  5. inverted = list(map(invert,$tagClass('button','ex11')));
  7. //let's insert a pause and direction reverse at the end
  8. inverted.push(pauseAnimation(1000));
  9. inverted[inverted.length-1].options.onForward = function(effect){effect.toggle()};
  11. //link the animations together,returning beginning of chain. (ex11 == inverted[0])
  12. ex11 = chainAnimations(inverted);

They even have the Fisheye:

MochiKit.Animator Fisheye

And finally, maybe you are up to the challenge:

I’ve spent idle time (during the commute, etc) over the past few days determining what the limits are in terms of what can be animated and figuring out cool demos once I get new functionality implemented. I do have one open challenge: MochiKit.Animator is theoretically capable of performing the DOM equivalent of Apple’s Exposé in a single animation. The big challenge is developing a layout algorithm. I plan on doing this as a demo once I get the chaining internals worked out and 1.0 released. If anybody wants to do it in the meantime, I’d be interested in seeing it. Regards.

Posted by Dion Almaer at 4:38 am

4.1 rating from 30 votes


Comments feed TrackBack URI


The release of MochiKit.Animator feels like quite a major thing here. You can read some comments by Kevin Dangoor and Ajaxian. It’s a fantastic API, and it really looks and smells far better than Scriptaculous, the current king of the…

Trackback by Isotoma — November 8, 2006

I’ve seen a fish eye before. Its similar to your eye, but in a fish.

Comment by Dan — November 8, 2006

I am a pretty harsh critic, but I actually liked this. Good job.

Comment by Snootz — November 8, 2006

What about modifying SVG this way? That would be fantastically immensely powerful.

Comment by rektide — November 8, 2006

Are you kidding me? 31KB? Quite large for adding a few effects to a webpage. I imagine some people could add this library for one simple effect on their website.. seems a waste of bandwidth really.

I may have to jump into this JS effects race – my own CSS animator JS library is 3KB and does most everything this does, and i even have a fancy editor for the effects to make it easy to play around and get things working fast. That’s one thing that all these toolkits seem to be missing is an editor, and they are all too bloated as well.

Comment by Damien — November 8, 2006

I can’t possibly fathom why anyone would remove the use of CSS classes for animation after seeing Bernard Sumption’s library.

Everyone understands CSS. A library which automatically does the tweening between “frames” specified using CSS declarations is so much more powerful than anything else…and makes sense to more people.

Comment by Nathan de Vries — November 8, 2006

Damien, I have no interest in competing for the minimal file size prize. I’m not even doing simple stuff like using tabs instead of spaces for indention. You can get all of mootools with bells and whistles in the same size this takes uncompressed, and moo’s effects library can do almost everything this does. But the almost is the key difference and is where all the complexity and most of the size comes from.

I certainly wouldn’t send it over the wire like this if I cared about bandwidth. I’d run it through a compressor and then gzip it and get it out at around 3-4k, which is trivial. I’m looking forward to dojo’s work on the js linker. It will make these objections even more pointless than they already are.

On the other hand, I like the editor idea. I’ll probably write one.

@Nathan: I was already planning on a keyframeAnimation function that allows you to provide a list of css/time pairs and get back an animation chain. It’ll be in 1.0.

@rektide: SVG is DOM and I believe takes CSS for styling, so you could certainly animate it like this. I don’t know what type of support SVG implementations have for querying style attributes. It’s not something I’ve looked into, nor do I plan to until SVG is on the IE team’s radar.

Comment by Karl G — November 8, 2006

It’s getting time that I publish my new framework, it does nearly the same as Animator, soplease wait a few day. It’s a universal framework, you can animate anything you want ,)

Comment by Andi Kalsch — November 9, 2006

Leave a comment

You must be logged in to post a comment.