Odometer – A JavaScript and CSS library for smoothly transitioning numbers | Hacker News Reader

Odometer – A JavaScript and CSS library for smoothly transitioning numbers

github.hubspot.com

110 pointsafschwartz20 comments

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

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

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)

I had actually used d3's internal transition / tween functions to do something similar. Take a look: http://jsfiddle.net/x4EBe/

It's nothing fancy, but was quite interesting to have in a dashboard we made.

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.

I agree, it's overwhelming. I prefer more subtle effects.

Nonetheless, I'll probably include this in "oh my so pretty" option of Dashing, competing with "barebones utilitarian" and "smart blend of bling and usefulness."

I agree. Thanks for the suggestion. https://github.com/HubSpot/odometer/commit/927b5e35cbe9d4071...

Pretty neat, but the kerning on the font is awful: http://i.imgur.com/ssPu5J9.png

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

For those curious, here's how that's done: https://github.com/HubSpot/odometer/blob/ef4a0f9b56b715b7f00...

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

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.

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

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

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.

BTW, I do like the effect.

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

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.

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

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

24 / win8 here, works fine

Nice!

Reply on news.ycombinator.com