Introducing Bouncy Ball: A TodoMVC for Web Animation

There’s been a growing interest in web animation recently, and with that, we’ve seen a ton of great technologies, browser APIs, and tooling being built. That’s awesome. And overwhelming. As a result, I’ve been working on a project called Bouncy Ball that, I’m hoping, can help with that.

Bouncy Ball is an attempt to compare web-animation approaches by taking a simple animation (a bouncing ball) and recreating it with each technique. In that regard, it’s similar to TodoMVC, the project that compares JavaScript MVC frameworks by building a to-do app with each one.

The project is two things:

• A Github repository containing examples for each of the techniques.
• A demo site that lets you watch the animations and read the source code required to create each one.

This does a couple things. It curates the most popular and common approaches for animating things on the Web today. It compares the approaches, demonstrating how high-level or low-level each of the technologies are. It also educates by showing the range of options for web animation today and giving you a sense of the developing ecosystem.

I’ve already learned a ton while working on it, but it’s still, very much, a work in progress. It needs more examples, more resources, and all sorts of improvements. Do you have any ideas about what would make something like this more useful or educational to you? Or maybe there are technologies you want to see examples for? Open an issue (or a pull request!), and let’s work on it together. It’ll be fun to see where it goes.

Note: This post was cross-posted on the Sparkbox Blog. They generously give me some free time each week to work on stuff like this. Pretty cool, huh?