
Show HN: Bouncy Ball – A TodoMVC for web animation - bryanbraun
http://sparkbox.github.io/bouncy-ball/
======
lojack
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.

~~~
polysaturate
I am experiencing the same exact combination here. Chrome OSX as well.

~~~
bryanbraun
I've got Chrome on OSX but I can't see it. What color line are you seeing?
Maybe you can drop a screenshot into an issue on github?
([https://github.com/sparkbox/bouncy-
ball/issues/new](https://github.com/sparkbox/bouncy-ball/issues/new))

------
stevejohnson
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.)

~~~
bryanbraun
Yeah, there's definitely room for refinement there. It's a bit tricky since
different libraries support different easings (and the interfaces vary
widely).

------
NikhilVerma
On a similar note I was trying to make more cartoony animations with CSS:
[http://jsbin.com/ravic/42](http://jsbin.com/ravic/42)

------
WheelsAtLarge
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.

------
hiven
CSS seems the smoothest on my phone

~~~
artursapek
Do phones benefit from hardware acceleration?

~~~
jeffhuys
Yeah, they most certainly do.

------
pests
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!

~~~
bryanbraun
Oh interesting. I'll look into that.

------
intruder
Very neat. Thank you for such a nice overview.

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

Nevertheless, I like the idea. Well done.

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

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

