MochiKit.Animator: New Animation in MochiKit > Archives

MochiKit.Animator: New Animation in MochiKit

"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:

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