chuck.js is a JavaScript library designed to do much of the heavy lifting of animating in HTML5's Canvas element. It focuses on features that are valuable to makers of infographics, like being able to pause at specific points on the timeline, working with explainer text, and easy setup of user controls like buttons and scrubbers. It works with Mike Swanson's Ai->Canvas Export Plug-In for Adobe Illustrator.
It's inspired partly by a desire to help the advances in visualization tools at news organizations catch up to the advances in tools for data sharing and acquisition. And partly because I've always loved animation, and bringing my graphics to life is something I've wanted to do for a long time.
Right now there's a small but powerful set of software for rendering two-dimensional motion on the Canvas that includes the plug-in mentioned above and
- processing.js by John Resig, based on the original language by Ben Fry and Casey Reas | source
- EaselJS by Grant Skinner | source
- tween.js by sole and Mr. Doob | source
- gury by Ryan Sandor Richards | source
- KineticJS by Eric Rowell | source
chuck is my contribution for the interaction developer who frequently has to present information sequentially alongside blocks of text that need to change in sync with the action. They've probably already got vectors, but need them to move.
As advanced as some of these libraries' features are, we're all just in our infancy -- like the Canvas medium itself. That's exciting and encouraging.
This is just a collection of code, so it doesn't save you the hard work of making the art on the front end. Once you've exported your artwork as .html files using the plug-in, the included shell script converts the files into chuck object instances. Those instances are powered by logic that handles the mechanics of animating them and putting them in sequence on a timeline.
You can see my progress in this example.
Here's the instruction manual.
And if the changelog interests you, knock yourself out.
I'm continually growing as a programmer, and I make -- and fix -- plenty of mistakes. This code will change as I learn from them.