Bouncy Ball

🔴 Compare web animation techniques by bouncing a ball with each one.
Alternatives To Bouncy Ball
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
342 years ago3January 12, 201622mitObjective-C
UILabel replacement with fine-grain appear/disappear animation
React Cool Inview1,4183a month ago86April 17, 202220mitTypeScript
😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).
React Native Graph1,303
24 days ago1April 29, 202225mitTypeScript
📈 Beautiful, high-performance Graphs and Charts for React Native
Use Web Animations1,219
a month ago60June 08, 202124mitTypeScript
😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.
8 days ago46mitC++
Animation Compression Library
Animation Instancing1,060
a year ago53otherC#
This technique is designed to instance Characters(SkinnedMeshRender).
602 years ago20April 16, 20203mitSwift
DynamicBlurView is a dynamic and high performance UIView subclass for Blur.
4 years ago4mitObjective-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 Ball504
10 months ago2mitJavaScript
:red_circle: Compare web animation techniques by bouncing a ball with each one.
Latios Framework481
3 days ago6otherC#
A Unity DOTS framework for my personal projects
Alternatives To Bouncy Ball
Select To Compare

Alternative Project Comparisons

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.


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


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.



Popular Animation Projects
Popular Performance Projects
Popular User Interface Categories

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.