The Sublime Text Website has some nifty animations to show of a few features. Turns out they’re not animated gifs.
One of the criteria was that the animations should work everywhere, from IE6 to an iPad. This ruled out two common video options, Flash and the
<video>element. Animated GIF files would have been a candidate, except for two issues: the 256 color limitation, which would have made the animations ugly, and the encoders I tried spat out huge files, at almost 1MB per-animation.Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.
Deliciously hacky!