Odometer – A JavaScript and CSS library for smoothly transitioning numbers(github.hubspot.com)
github.hubspot.com
Odometer – A JavaScript and CSS library for smoothly transitioning numbers
http://github.hubspot.com/odometer/
12 comments
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.
Cool effect! Combine it with D3 for some bad ass visualisations!
PS: Why do designers think that native scrolling is bad? Thanks, Apple...
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 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.
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. Thanks for the suggestion. https://github.com/HubSpot/odometer/commit/927b5e35cbe9d4071...
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."
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."
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...
Hubspot is doing some very cool things to the web. Good job guys!
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
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
Pretty neat, but the kerning on the font is awful: http://i.imgur.com/ssPu5J9.png
[deleted]
Nifty effect! And it only maxes out one of my cores!
Nice!