🔴 Compare web animation techniques by bouncing a ball with each one.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
site
test
.babelrc
.eslintrc.json
.gitignore
.stylelintrc
contributing.md
index.html
license.md
package.json
readme.md
server.js
server.md
yarn.lock

readme.md

Bouncy Ball

Bouncy Ball Graphic

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:

  1. A directory containing examples and documentation for each animation technique.
  2. A demo site where you can see the animations and read the source code required to create each one.

Project Goals

  1. Curate the most popular and common web-animation techniques.
  2. Compare the techniques interactively.
  3. Educate developers with basic information for each technique.

Performance?

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:

Other Resources for Comparing Animations

Contributing

For questions, ideas, or bugs, feel free to open an issue. Pull requests are even better, though you'll want to read the contribution guidelines first.

License

MIT