https://github.com/sparkbox/bouncy-ball

:red_circle: Compare web animation techniques by bouncing a ball with each one.
https://github.com/sparkbox/bouncy-ball

Last synced: about 2 hours ago
JSON representation

:red_circle: Compare web animation techniques by bouncing a ball with each one.

• Host: GitHub
• URL: https://github.com/sparkbox/bouncy-ball
• Owner: sparkbox
• License: mit
• Created: 2016-06-13T17:16:45.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2024-02-03T18:28:23.000Z (9 months ago)
• Last Synced: 2024-05-05T12:32:23.007Z (6 months ago)
• Language: JavaScript
• Homepage: https://sparkbox.github.io/bouncy-ball
• Size: 3.17 MB
• Stars: 596
• Watchers: 30
• Forks: 70
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Contributing: contributing.md
  • License: license.md

Awesome Lists containing this project

README

        
# Bouncy Ball



  

    

  



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](https://github.com/sparkbox/bouncy-ball/tree/master/examples)** containing examples and documentation for each animation technique.

  2. A **[demo site](https://sparkbox.github.io/bouncy-ball/)** 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](https://github.com/mrdoob/stats.js/#bookmarklet).

To learn more on how to build, profile, and optimize, performant web-animations, check out these resources:

  * [HTML5 Animation Speed Test](https://greensock.com/js/speed.html) - A performance comparison / stress-test of several animation libraries, by GreenSock.

  * [An Introduction to Hardware Acceleration with CSS Animations](https://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/) - A detailed post on hardware acceleration for web animations.

  * [jankfree.org](http://jankfree.org/) - A great collection of resources for learning about high-performance web rendering, and performance profiling tools.

## Other Resources for Comparing Animations

  * [A Comparison of Animation Technologies](https://css-tricks.com/comparison-animation-technologies/)

  * [Weighing SVG Animation Techniques (with Benchmarks)](https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/)

## Contributing

 For questions, ideas, or bugs, feel free to [open an issue](https://github.com/sparkbox/bouncy-ball/issues/new). Pull requests are even better, though you'll want to read the [contribution guidelines](contributing.md) first.

## License

[MIT](https://github.com/sparkbox/bouncy-ball/blob/gh-pages/license.md)