Animated gifs are brilliant…
…But they’re also kind of rubbish. We can’t pause a gif, skip to a particular point, or grab individual frames from the image element.
There are a bunch of different libraries that can decode gif (check out omggif, gify & gif-stream). I’m a fan of the decoder in jsgif; it’s awkward to use, pretty inefficient, a bit dated, and feels nice.
You provide an object with a set of callbacks for the different parts of the gif. Callbacks are fired as soon as that part of the gif is parsed and we can choose what we do with the data.
For example, we can listen out for the
hdr (header) block, and pull out the global colour table for the gif.
Global colour table for example.gif
With the actual image data; each frame of the animated gif starts with a Graphics Control Extension (GCE) block which contains information about the section being drawn, followed by the actual (LZW encoded) pixel data.
I’ve skimmed over a lot of really interesting stuff here - for a really in-depth look at gif encoding, check out this blog post.
Once we’ve got those decoded pixel values back, we can map them through our colour tables to get the RGB values for each pixel, and now we’ve got something that can be drawn to a canvas.
Exported frame data
Each frame has an overwrite rule provided in its GCE block, which defines how the frame data is drawn to the existing graphic - either being appended to, or completely replacing it. This, combined with the transparency capabilities of the gif allow frames to update only the changed pixels of the image.
By implementing overwrite rules, frame delays, and probably some other stuff, it’s possible to play/pause/scrub through a gif file (see libgif-js).
Though, back to the frame data - we don’t have to settle on canvas .drawImage. If we load our data into a WebGL context, we can stack up the frames to get an overall feel for the structure of the gif:
- A spinning shape - full re-draw each frame
- >256 colours - a palette limitation workaround
- Iso cubes by Bees&Bombs - looks awesome
- Hexagon Friends also, Bees&Bombs - looks pretty
- Trefoil yup, Bees&Bombs - nice angles
- Adventure time - a more traditional animation
- Kitten - the majority of gifs
Here’s what the original gif spec has to say about animation:
Animation : The Graphics Interchange Format is not intended as a platform for animation, even though it can be done in a limited way.
…I kind of feel for the person who wrote this; it must be hard to look around the web and see millions of people ignoring your advice. Though I hope they see the positive side - animated gifs might be a terrible hack; but they’re totally brilliant.
ps. check out Bees & Bombs