Slides from Presentation in Text Format

The problem
Jquery has powerful animation functions, but the animation calls are tied too closely to the queried objects. If we make an animation, we can't reuse it on new queries. Nor can we manipulate or compose those animations to form new animations. This makes building a large complex animation a hassle.

Domain Analysis
The goal is to write composable animation functions, which themselves can be used to create bigger more complex functions. Essentially, we separate the animation from the query, and make the animation a building block that can be reused.
Today these kinds of animations are written by chaining many calls to jQuery's animate. Others use pure Javascript and animate via timers and events. Other tools include dedicated animation software, like Flash or various Javascript plugins.

Language Constructs
Our programs are made from first class functions, closures, and objects. The AnimObjects are javascript objects containing the parameters that specify the animation's behavior. First class functions allow us to pass methods around and chain our animations together, allowing us to build more complex program.

The semantics of our program follow regular javascript function calls to create the animation sequences, and regular jQuery calls to execute them.
example code for an animation
anim0 = createAnim({left:”+=200px”}, {top:”+=200px”});
$('div').execAnim(anim0);

Demo

anim1 = createAnim("moveRight", {opacity:0.5});
$("#one").execAnim(anim1);

anim2 = createAnim({top:"+=150px"},{width:"+=50px", height:"+=50px"})
$("#two").execAnim(anim2);

anim3 = combineAnim(anim1, anim2);
$("#three").execAnim(anim3);

anim4 = squashAnim(createAnim(anim3, {top:"-=200px"}));
$("#four").execAnimLoop(anim4, 2);

Implementation
The implementation is an internal domain language written with javascript and jQuery's method for writing plugins. We abstract animation sequences into an array of objects, and create operator functions that can manipulate these sequences. Any animation sequence can be pieced together or merged, making the animations composable and reuseable. Underneath, this is done with clever array traversal, hash manipulation, and regexes.
We then create executor functions that can perform/carry out the animation sequence. And they do this by making use of jQuery's animate function.
Finally, our “expressability” feature is done by having a hash, store string to animObjects. The animObjects are valid animation sequences that can be carried out.

What you are proud of
We're most proud of the combine function. It allows us to merge and splice two different animation sequences together and form a new animation sequence that can have a totally different behavior.

Mistakes
One of our goals was “Expressability.” The idea was that instead of individually stating which parameter you wanted tweaked to form the animation, you could simply pass a string, like “moveRight” into createAnimation, and it would smartly know what to do. Unfortunately it gets hard to predict what a user would try to say, and you lose too much expressive power that it is an almost useless feature.

What we would do differently
Given more time, we would have liked to explore and implement richer and more powerful animation effects such as rotate, distort, and possibly even 3D.