

Odometer – A JavaScript and CSS library for smoothly transitioning numbers - afschwartz
http://github.hubspot.com/odometer/

======
eliaskg
Cool effect! Combine it with D3 for some bad ass visualisations!

PS: Why do designers think that native scrolling is bad? Thanks, Apple...

~~~
crazygringo
I know. Trying to look at the demo page while using a mouse with a scroll
wheel was infuriating. (Stop! Wait! No, come back! No, not that far! Wait!
Stop! WTFFF)

------
darkmighty
It's a neat effect, but I don't like it because it's like seizure inducing to
me, since the letters on the right move so fast.

Although not realistic, I would suggest a better effect would be simply roll
the numbers the same amount, looking more like a roulette I guess.

~~~
afschwartz
I agree. Thanks for the suggestion.
[https://github.com/HubSpot/odometer/commit/927b5e35cbe9d4071...](https://github.com/HubSpot/odometer/commit/927b5e35cbe9d40712dc53ed33ac5c0f289c2b6c)

------
dustinrodrigues
Pretty neat, but the kerning on the font is awful:
[http://i.imgur.com/ssPu5J9.png](http://i.imgur.com/ssPu5J9.png)

------
gingerlime
The neatest trick was tying the odometer to the github stars! Cheeky, but
cool.

~~~
afschwartz
For those curious, here's how that's done:
[https://github.com/HubSpot/odometer/blob/ef4a0f9b56b715b7f00...](https://github.com/HubSpot/odometer/blob/ef4a0f9b56b715b7f0076cdf77da2024eaa64bd3/docs/intro.html#L69)

------
ramate
Nifty effect! And it only maxes out one of my cores!

------
Cthulhu_
Nice. I did see some framedrop or something when the animation was at 'max
speed' though; Chrome's FPS meter is reporting a frame rate of 30 FPS when the
animation runs, instead of a stable 60. Not sure if that can actually be fixed
though.

~~~
afschwartz
It's very interesting. When animating from 12 to 34, we'll animate the 2
through 22 digits to reach 4. However, when animating from 12 to 3004, we
don't spin the 2 through 2992 digits. Instead, we skip digits artificially
based on a target frame rate. (Since the animation is supposed to take 2
seconds, at 60fps we have 120 frames to show those digits, so you're not going
to see all 2992 anyway.) We originally set this target frame rate to 60. We
recently dropped it down to 30 in an attempt to improve the perceived FPS in
Chrome. (See
[https://github.com/HubSpot/odometer/commit/fc5ca1572d0ad218c...](https://github.com/HubSpot/odometer/commit/fc5ca1572d0ad218c9851bc6680d5f1cceb39899))

We'd certainly love to hear from the community if there are any other
approaches worth trying. For those interested, we have an issue tracking
rendering performance here:
[https://github.com/HubSpot/odometer/issues/3](https://github.com/HubSpot/odometer/issues/3)

------
billrobertson42
Seems completely broken in Firefox (v 25.0 beta). The only thing that happens
in the jsFiddle example is that it changes the number, and the github page
looks like a web page from in 1994. Switched to Chrome and all is pretty.

~~~
billrobertson42
BTW, I do like the effect.

------
filipedeschamps
Hubspot is doing some very cool things to the web. Good job guys!

------
slouch
I was expecting a slow rollover like an odometer typically displays. All the
demos have very fast numbers flying by and I don't know when I would find that
useful.

~~~
manojlds
There are places where I would use the latter, but the name of the library is
wrong.

------
eCa
It doesn't work in FF24/win7, at least not for me.

The slow example looked nice in Chrome though. Might look good on a
dashboard..

~~~
dylz
24 / win8 here, works fine

------
matiasb
Nice!

