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:

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.

Project Goals

Curate the most popular and common web-animation techniques.
Compare the techniques interactively.
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:

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.

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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Zcanimatedlabel	2,293	34		2 years ago	3	January 12, 2016	22	mit	Objective-C
UILabel replacement with fine-grain appear/disappear animation
React Cool Inview	1,418		3	a month ago	86	April 17, 2022	20	mit	TypeScript
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
React Native Graph	1,303			24 days ago	1	April 29, 2022	25	mit	TypeScript
📈 Beautiful, high-performance Graphs and Charts for React Native
Use Web Animations	1,219			a month ago	60	June 08, 2021	24	mit	TypeScript
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
Acl	1,074			8 days ago			46	mit	C++
Animation Compression Library
Animation Instancing	1,060			a year ago			53	other	C#
This technique is designed to instance Characters(SkinnedMeshRender).
Dynamicblurview	860	60		2 years ago	20	April 16, 2020	3	mit	Swift
DynamicBlurView is a dynamic and high performance UIView subclass for Blur.
Ocbarrage	567			4 years ago			4	mit	Objective-C
iOS 弹幕库 OCBarrage, 同时渲染5000条弹幕也不卡, 轻量, 可拓展, 高度自定义动画, 超高性能, 简单易上手; A barrage render-engine with high performance for iOS. At the same time, rendering 5000 barrages is also very smooth, lightweight, scalable, highly custom animation, ultra high performance, simple and easy to use!
Bouncy Ball	504			10 months ago			2	mit	JavaScript
:red_circle: Compare web animation techniques by bouncing a ball with each one.
Latios Framework	481			3 days ago			6	other	C#
A Unity DOTS framework for my personal projects