Skip to main content

Comparing Web Animation Approaches with Bouncy Ball

08-02-16 Bryan Braun

Bouncy Ball compares web-animation approaches by taking a simple animation (a bouncing ball) and recreating it with CSS, GreenSock, jQuery, and vanilla Js (to name a few).

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 todo app with each one.

The project is two things:

  1. A Github repository containing examples for each of the techniques.

  2. A demo site that lets you watch the animations and read the source code required to create each one.

This does a couple of 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.

Let’s Collaborate

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.

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development