sparkbox / bouncy-ball

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

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 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:

• 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

• A Comparison of Animation Technologies
• Weighing SVG Animation Techniques (with Benchmarks)

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

bouncy-ball's Issues

Update Mo.js demo to use the latest version of Mo.js

We need to update the Mo.js demo to use the latest version of Mo.js. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Update Popmotion demo to use the latest version of Popmotion

We need to update the Popmotion demo to use the latest version of Popmotion. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Simplify Javascript Architecture

This codebase has a whole bunch of unnecessary Javascript/Node dependencies like Browerify, Babel, PostCSS and others. Modern browsers now support ES6 modules, CSS custom-properties, and the other features we were needed, so we can dramatically simplify this codebase by transitioning it to rely on the web platform features instead.

Here's a basic approach we can follow: https://www.bryanbraun.com/2020/08/28/a-minimalist-development-workflow-using-es6-modules-and-snowpack.

Possible new animation methods

During the last presentation, I noted proposed animation methods, and added a few of my own:

• <canvas>

  • 2D context
  • 3D context (WebGL)

• <video> — just .mp4 is sufficient nowadays

• GIF, animated WebP, Animated PNG — probably all 3 at once using <picture>:

  <picture>
    <source srcset="ball.webp" type="image/apng">
    <source srcset="ball.apng" type="image/webp">
    <img src="ball.gif" alt="Bouncy ball">
  </picture>

• SVG in OpenType — view in Firefox

• <marquee> (I can post my code; it's mostly the derivative of the pure-JS algorithm feeding into the scrollamount attribute)

• application/x-multi-part-mixed-replace — this is how those ancient webcams worked; remember those?

• Flash

• WebVR

• Cromwell once joked about making an HTC file for old IE

Update D3 demo to use the latest version of D3

We need to update the D3 demo to use the latest version of D3. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Update Lottie demo to use the latest version of Bodymovin

We need to update the Lottie demo to use the latest version of Bodymovin. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files are preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Update Velocity demo to use the latest version of Velocity

We need to update the Velocity demo to use the latest version of Velocity. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Add a Bouncy-Ball Demo using Anime

Add a bouncy-ball demo using Anime.

The API looks similar to those for mojs and Greensock. I'll bet that by using the mojs demo and/or greensock demo as a starting point you could get most of the way there.

A few tips for making this:

1. Start by duplicating an existing demo folder and renaming your copy to something like anime. The animation itself will live in /examples/anime/index.html.
2. Look at the other demos for reference parameters. For example, you can find details on ball-size, bounce height, easings, cubic-bezier functions, and more.
3. To bring it into the main page, just add a new <input> and <label> for it in the selection bar.

Use better description text in meta tags.

For example, here's what the description looks like, as indexed by Google:

That code-snippet is not very useful in this context.

Update <img> example to also use MP4?

Safari recently allowed the use of .mp4 video in <img> and CSS images. With the <picture> source selection that bouncy-ball is already using, this could be as simple as:

<picture>
  <source srcset="image.mp4" type="video/mp4"> <!-- ✨ -->
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.apng" type="image/apng">
  <img src="image.gif" alt="Bouncy ball">
</picture>

Add an example using Flash

Yes, I'm serious.

I don't know how to make a flash animation, so I'm relying on somebody else to contribute this one (@zastrow? 😅).

Remove Yarn and replace it with corresponding npm features

This will include:

• Removing the Yarn dependency from package.json.
• Generating a package.lock file to replace the yarn.lock file.
  • This may create some patch/minor update, so we'll need to check to see that the site is still working as expected.
• Updating references to Yarn in the docs, like here and here.
• Replacing any other uses of Yarn in the codebase.

Bug in Safari for the CSS Step animation

The CSS animation has a bug in Safari where it appears that the step distance is off somehow:

This appears to only be happening in Safari. I wasn't able to reproduce the issue in Chrome, Firefox, or Edge.

Project Goals

Hey a suggestion.
In addition to three very useful project goals, please consider adding one more - Performance.

Each of the techniques does things in its own manner for different use cases. Some are good for certain things. So a suggestion, not asking universal but of yours, of which would give the best performance would be helpful as well.

Add "flip-book" style animations

Add examples using technologies that animate things by flashing a series of images. For example:

• Animated Gif
• HTML5 Video
• CSS Sprites (example here)

React bouncy-ball demo isn't working in Firefox

The bouncy-ball demo using React isn't working in Firefox. The ball is displayed but doesn't move.

This same behavior exists in Firefox Nightly and Firefox DevEdition.

I don't see any errors being displayed in the console.

Most likely we can fix this without polyfills or feature detection. If not, we can use modernizer to detect the issue and display the incompatibility message (like we do for the SVG animations).

Add a demo for "Motion One"

@mattgperry has built a new animation library called Motion One (https://motion.dev) that would be a great addition to this collection.

For an example of the changes that usually involved in adding a new demo, reference this PR for popmotion: #54

There are some helpful tips in the contribution guidelines.

Add a Bouncy-Ball Demo using D3

Add a bouncy-ball demo using D3.

This would be a good contribution for somebody familiar with D3 and its ecosystem.

I think the right supporting library to use would be d3-transition, but I'm not as familiar with that ecosystem, so hopefully you can confirm that via research or experience.

A few tips for making this:

1. Start by duplicating the /examples/template folder and renaming your copy to something like d3, and create the animation in /examples/d3/index.html
2. Look at the other demos for reference parameters. For example, you can find details on ball-size, bounce height, easings, cubic-bezier functions, and more.
3. To bring it into the main page, just add a new <input> and <label> for it in the selection bar.

Update Matter.js demo to use the latest version of Matter.js

We need to update the Matter.js demo to use the latest version of Matter.js . Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Add an HTML5 Video Approach

Add a Canvas example?

I'm a bit on the fence about this one because I picture it as being 95% the same as the "Vanilla Javascript" technique, the only difference being that the position is applied to a canvas instead of an html element.

It being so similar seems to go against the no "slight variations on existing techniques" principle in the Contribution guidelines, but I'm open to suggestions. Anybody have thoughts?

Update Javascript Styling across the codebase

We just added eslint rules in #28, but we haven't updated the code to reflect the new rules.

(Note to self: I should probably confirm that the new rules are what we really want)

Update the JS files in this codebase to match the linting rules (both "examples" and the site JS itself). This should be straightforward if your text editor picks up the .eslintrc file.

Improve the description text

This is what the current search engine results look like:

It would look better if we put the highlighted part into a description meta tag, so the rest doesn't show up.

Minor GreenSock tweaks

No need to create a variable to store the ball element - GSAP has a selector (document.querySelectorAll()) built in, so you could simplify it to:

TweenMax.to("ball", 0.575, {
  y: 160,
  repeat: -1,
  yoyo: true,
  ease: Power1.easeIn
});

Also, it's GreenSock, not Greensock (capital "S") :)

Thanks again for putting this whole thing together. Just watched the Fluent video of your presentation (https://www.youtube.com/watch?v=_TmhQI6X4JA) - nice job!

D3 demo: ball starts at the bottom moving upwards

For all the other demos, the ball starts at the top and falls downwards.

Working example: http://sparkbox.github.io/bouncy-ball/
Non-working example (D3): http://sparkbox.github.io/bouncy-ball/#d3

Update GreenSock demo to use the latest version of GreenSock

We need to update the GreenSock demo to use the latest version of GreenSock. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Add a local development server

Currently, there's nothing included with the project to serve the static files during local development. We currently recommend using something like python's SimpleHTTPServer, but that won't work for people who don't have it pre-installed on their machine.

We should:

1. Include a local server (like https://www.npmjs.com/package/http-server) in the npm package.json file.
2. Set up an npm scripts task (like npm run server?) that kicks off the server
3. Update the instructions in contributing.md to use the new local server.

Any other suggestions for making local development easier

Update the React.js demo and migrate it to a build-free setup.

This will include the following updates:

• To simplify the codebase, we'd like to make this demo build-free, by using an in-browser babel download, as described here.
  • Once this is done, we can remove the task from package.json that was triggering this build.
  • At this point, we can can also remove /examples/react/script-compiled.js
• We want to the latest version of each of the dependencies, and place them in the examples/react folder.
  • Please commit the actual dependency files to the codebase instead of using CDN links.
  • Minified files are preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the new setup, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Add a CSS-sprite approach

I think this technique is different enough to merit a separate example in the project.

Here's a post describing it: http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps

Add Demos for SVG Animations

For example:

• SMIL
• snap.svg

Vendor prefixes for animation property?

According to Can I use, there are a few edge cases where the webkit prefixes are still needed for cross-browser animations with CSS. I wonder if it would be better to include the webkit prefixes in the CSS example. Two examples are UC Browser for Android and any version of Safari on Windows.

Add a WebGL example?

This would mean using the WebGL 3DContext APIs to render a bouncing ball, without any 3rd party libraries.

I'm not sure what this code would end up looking like. I'm most interested in adding the demo if the code has non-trivial differences to other existing approaches (like canvas, for instance).

Important: this doesn't mean adding a 3D version. Any example using WebGL would need to visually look the same as the existing demos, as described in the contribution guidelines.

Add an animated gif example

In #35, @tigt recommended using other animated image formats as fallbacks:

GIF, animated WebP, Animated PNG — probably all 3 at once using <picture>:

<picture>
  <source srcset="ball.webp" type="image/apng">
  <source srcset="ball.apng" type="image/webp">
  <img src="ball.gif" alt="Bouncy ball">
</picture>

That would make this an more generic "animated images" approach.

I've got some preliminary work in place for this so I'll assign it to myself.

Update Anime demo to use the latest version of Anime

We need to update the Anime.js demo to use the latest version of Anime.js. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Vanilla JS quadratic function easing

The Vanilla JS implementation uses kinematic equations, which is a good common sense way to simulate physics, but I thought I'd have a crack at a different approach just for fun. See my pen for an implementation that positions the ball using a quadratic function.

http://codepen.io/omasback/pen/zBXLBX

It definitely took me a while to figure out the math for this, so it's not an technique I would recommend using for work unless the developer is already familiar with the math. But I think it could serve as good inspiration regardless. I'm not sure if this has a place here, maybe alongside the existing Vanilla JS version? maybe have two vanillas? Let me know if you'd like a pull request

Update the Greensock demo to use GSAP 3

Announcement post: https://greensock.com/3/

It would be nice to use the newer api, mentioned in the post:

Simplified API (no more TweenLite, TweenMax, TimelineLite, and TimelineMax - they're consolidated into a simple "gsap" object, yet we've maintained backward compatibility with the vast majority of legacy code!)

Improve color contrast on some of the buttons

Some of the buttons have poor color contrast, which is bad for accessibility. We should:

• Change any button colors that don't meet WCAG AA contrast requirements.
• Update the corresponding ball color to match.
  • Note: some of the ball colors might be difficult to change (like the ones for flash and video). If any of these need changing but would take special effort then feel free to create a separate issue for them.

update AirBnB style guide

The link in contributing.md to the AirBnB ES5 style guide has changed. Assuming you still want ES5, the link should point to
https://github.com/airbnb/javascript/tree/es5-deprecated/es5

Update jQuery demo to use the latest version of jQuery

We need to update the jQuery demo to use the latest version of jQuery. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
  • For jQuery, we should see if we still need the jQuery-UI dependency, or if we can drop it.
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Add an example using AfterEffects and Bodymovin / Lottie

Lottie is a popular "after-effects to javascript" export tool and web player. See more at: https://github.com/bodymovin/bodymovin

If someone can help build the animation in after-effects, I'll work with you to figure out how to export it to javascript.

There are some helpful tips in the contribution guidelines.

Slight simplification to GreenSock example

I'd recommend changing:

transform: 'translate3d(0px, 160px, 0px)'

to:

y:160

It's shorter and faster :)

Thanks for putting this together.

Add a Bouncy-Ball Demo using ReactMotion

Add a bouncy-ball demo using React Motion.

This would be a good contribution for somebody familiar with ReactJS and React Motion.

A few tips for making this:

1. Start by duplicating the /examples/template folder, renaming your copy to something like react-motion, and creating the animation in /examples/react-motion/index.html
2. Look at the other demos for reference parameters. For example, you can find details on ball-size, bounce height, easings, cubic-bezier functions, and more.
3. Once the demo is working on /examples/react-motion/index.html you can bring it into the main page by adding a new <input> and <label> for it in the selection bar.

See contributing.md for details on the development / contribution workflow.

Update the "Flash" demo

Current demo: https://sparkbox.github.io/bouncy-ball/#flash

Flash is now deprecated across all browsers. At the very least we should update the demo description and also add comments to the code snippet, to make sure this is communicated clearly. We could even update the label on the button to say "Flash (deprecated)", if we want.

We could remove the demo altogether, but I kind of like having it there for archival purposes.

Bug in Safari for Web GL animation

In Safari, the WebGL animation doesn't move (tested with Safari 12.1 on Mac OS Mojave 10.14.4). This bug was probably introduced through a browser update, since it was working before and we haven't changed this example recently.

This error was found in the console, and is likely the cause of the issue:

Note: this issue doesn't occur in modern Chrome, Firefox or Edge.

Update P5 demo to use the latest version of P5

We need to update the P5 demo to use the latest version of P5. Steps include:

• Download the latest version of the library, and place it in the examples/[library-name] folder. Minified files preferred, but non-minified works.
  • The filename should include the version number in it (for example: jquery-3.0.0.min.js).
• Update the demo to use the updated library, including any necessary code changes to the demo.
• Verify that the demo works across a sample of modern browsers (like Firefox, Chrome, Safari, and Edge).
  • Follow the instructions here to run a test version of the site locally.
• Commit your changes and submit a pull request.

Improve keyboard accessibility - tab navigation

It's currently difficult to use the keyboard to navigate between animation options (and the "more info" link).

Let's make all the interface options tab-able and make the focus states more clear (ideally in a way that looks nice).

Broken Contribution Guidelines link

The readme links to the old contribution guidelines file on the gh-pages branch (which no longer exists). It should instead link to the contributing.md file on master.

Change the docs toggle from a link to button

Currently, the toggle for open/closing the docs about each animation uses an <a> element:

This works but it would probably be more meaningful and accessible to use a <button> element styled as a link instead. Several posts recommend this.

The change would include:

• Replacing the <a> element with a <button> element.
• Override the default styles for the button to make it look like it a link. The idea is for it to stylistically look the same as it currently does.
• Check that there are no functional regressions.

Add a demo using a 2D physics engine

For example, matter.js.

Here's a rough prototype that could turn into a demo: https://codepen.io/bryanbraun/pen/gLxmga

note to future self: the rectangle boundaries are annoying to work with. Maybe I can make better boundaries with world.bounds

Other Animation Libraries

This is a placeholder issue for other animation libraries we could possibly build demos with. This includes:

• Pixi.js: https://github.com/pixijs/pixi.js/
• Just Animate: https://github.com/just-animate/just-animate (and a bouncy-ball demo ).

At some point we'll add them, assuming they meet the contribution criteria. Since these techniques are similar (and similar to existing ones), adding them is lower priority than the more unique approaches we haven't documented.