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.
The project is two things:
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.