HN Explorer

16 comments

[ 3.1 ms ] story [ 37.0 ms ] thread
intruder
Very neat. Thank you for such a nice overview.
hiven
CSS seems the smoothest on my phone
artursapek
Do phones benefit from hardware acceleration?
jeffhuys
Yeah, they most certainly do.
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).
maxwelljoslyn
Good work. Clean, well-presented, well-commented, and easy to use.
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.
acangiano
The jQuery version has artificacts for me on mobile (iPhone 6s Plus with Safari).

Nevertheless, I like the idea. Well done.

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.
frou_dh
There could be a solution using elm-lang as a curveball. Graphics seem up its alley.
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.