search

sparkbox / bouncy-ball

:red_circle: Compare web animation techniques by bouncing a ball with each one.
https://sparkbox.github.io/bouncy-ball
MIT License
605 stars 66 forks source link

Add a Bouncy-Ball Demo using D3 #21

Closed bryanbraun closed 7 years ago

bryanbraun commented 7 years ago

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.
bryanbraun commented 7 years ago

(update: there's a PR up to address this at https://github.com/sparkbox/bouncy-ball/pull/23)

AmGarera commented 7 years ago

Going to be submitting my pull tonight, got this done pretty quick

bryanbraun commented 7 years ago

Fixed in #26. Closing.