This project compares web animation techniques by recreating a simple animation (a bouncing ball) with each one. It's kind of like TodoMVC, but for web animation.
This repository is two things:
- A directory containing examples and documentation for each animation technique.
- A demo site where you can see the animations and read the source code required to create each one.
- Curate the most popular and common web-animation techniques.
- Compare the techniques interactively.
- Educate developers with basic information for each technique.
This project does not attempt to compare the performance of these animation approaches. If you are interested in a comparison like this, consider using a FPS bookmarklet, like this one from stats.js.
To learn more on how to build, profile, and optimize, performant web-animations, check out these resources:
- HTML5 Animation Speed Test - A performance comparison / stress-test of several animation libraries, by GreenSock.
- An Introduction to Hardware Acceleration with CSS Animations - A detailed post on hardware acceleration for web animations.
- jankfree.org - A great collection of resources for learning about high-performance web rendering, and performance profiling tools.