6 ms·
Odometer – A JavaScript and CSS library for smoothly transitioning numbers
- eliaskg 13y agoCool effect! Combine it with D3 for some bad ass visualisations! PS: Why do designers think that native scrolling is bad? Thanks, Apple...
- crazygringo 13y agoI 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)
- _anks 13y agoI had actually used d3's internal transition / tween functions to do something similar. Take a look: http://jsfiddle.net/x4EBe/ http://jsfiddle.net/x4EBe/ It's nothing fancy, but was quite interesting to have in a dashboard we made.
- darkmighty 13y agoIt'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.
- generj 13y agoI 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."
- afschwartz 13y agoI agree. Thanks for the suggestion. https://github.com/HubSpot/odometer/commit/927b5e35cbe9d40712dc53ed33ac5c0f289c2b6c https://github.com/HubSpot/odometer/commit/927b5e35cbe9d4071...
- gingerlime 13y agoThe neatest trick was tying the odometer to the github stars! Cheeky, but cool.
- afschwartz 13y agoFor those curious, here's how that's done: https://github.com/HubSpot/odometer/blob/ef4a0f9b56b715b7f0076cdf77da2024eaa64bd3/docs/intro.html#L69 https://github.com/HubSpot/odometer/blob/ef4a0f9b56b715b7f00...
- eCa 13y agoIt 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..
- deleted 13y ago[deleted]
- dylz 13y ago24 / win8 here, works fine
- filipedeschamps 13y agoHubspot is doing some very cool things to the web. Good job guys!
- Cthulhu_ 13y agoNice. 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 13y agoIt'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/fc5ca1572d0ad218c9851bc6680d5f1cceb39899 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 https://github.com/HubSpot/odometer/issues/3
- dustinrodrigues 13y agoPretty neat, but the kerning on the font is awful: http://i.imgur.com/ssPu5J9.png http://i.imgur.com/ssPu5J9.png
- deleted 13y ago[deleted]
- slouch 13y agoI 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 13y agoThere are places where I would use the latter, but the name of the library is wrong.
- ramate 13y agoNifty effect! And it only maxes out one of my cores!
- matiasb 13y agoNice!
- billrobertson42 13y agoSeems 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 13y agoBTW, I do like the effect.