Notes on programming by Daniel Mendel

New Compound Animations in glitz.js

Feb 25th, 2013

glitz.js support for defining animations is pretty flexible, but it is designed for fairly simple interactive behaviors and has, until now, lacked a good method for building complex animations from component parts. I’ve wanted to add a good API for to do this for a while and this week I finally got a chance to do so, while pairing with Zach Allaun at Hacker School. I’m really excited about what we came up. First, I’ll explain the state of affairs before our changes.

Good, but not great

The animation API that glitz implements is very straightforward, if you’ve ever animated DOM elements with jQuery.animate then the syntax should be pretty familiar. All of the following animations are equivalent.

If animate is invoked on an object while that object is still performing a previous animation, the current animation is immediately canceled and the new one begins. This is the default behavior because interactivity requires an immediate response from objects. If you want to build a complex series of animations, you can do so using nested callbacks.

123456

// move left, then down, then fade the colorbox.animate({x:100},5000,function(){box.animate({y:100},5000,function(){box.animate({strokeColor:'#f00'},5000);})})

As you can imagine, this gets to be pretty ugly pretty quickly if you want even fairly simple sets of actions. Futhermore, it’s difficult to store animation routines and run them more dynamically – users would have to implement their own methodology which would, at the most simple, look something like this…

Enter Compositions

First we thought it would be good if you could compose a series of animations like this:

12

// move left, then down, then fade the colorbox.animate([{x:100},{y:100},{strokeColor:'#f00'}]);

This is already clearly better than the alternative, but then we decided we had to include support to create parallel animations as well, something that was not possible in any way shape or form before.

12

// move left and down simultaniously but with different end timesbox.animate([[{x:100,duration:500},{y:50,duration:1000}]]);