Show HN: Bouncy Ball – A TodoMVC for web animation

Noticing some artifacts in Web Animations API, Greensock, Vanilla JS, and CSS. Looks like a single 1px line above/below the ball. Wonder what the cause of it is. Using Chrome on OSX.

One issue here is there's no exact test case. As a result, all variants seem to use slightly different timing curves. Maybe that's irrelevant, but it's at least annoying to look at.

(Not to say I don't appreciate this page.)

On a similar note I was trying to make more cartoony animations with CSS: http://jsbin.com/ravic/42

Nice, thanks for the demo. I used to be a web developer awhile back but had no idea you could do this type of animation with pure css. Looks like I need to refresh my skills.

CSS seems the smoothest on my phone

Vanilla JS, CSS, Velocity, and Web Animations API are not working for me.

Greeksock didn't work at first but enough clicks later it worked. Sometimes I'd see the ball for a few frames at the top of its drop before nothing.

Firefox 45.0.2 on Ubuntu 16.04.

Otherwise looks good!

Very neat. Thank you for such a nice overview.

The jQuery version has artificacts for me on mobile (iPhone 6s Plus with Safari).

Nevertheless, I like the idea. Well done.

There could be a solution using elm-lang as a curveball. Graphics seem up its alley.

Good work. Clean, well-presented, well-commented, and easy to use.