5 ms·

CountUp.js

48 points by electic 13y ago

niceguyneil 13y ago
Suggestion: allow passing in target as a DOMElement, rather than by id. That makes this more useful when template rendering in done off-DOM, or when IDs aren't used.
- zackbloom 13y ago
  If it's an object treat it as a dom node, if it's a string, run it through document.querySelector.
ricardobeat 13y ago
Nothing happens on mobile safari, looks like the button is not clickable?
agildehaus 13y ago
If I have it count up to 1 in 20 seconds, it only takes 10 seconds? It also doesn't seem to be linear, which is fine, but there should be some way to make it linear And why just up? It'd be great if it could also count down.
zackbloom 13y ago
You might also want to look at Odometer: http://github.hubspot.com/odometer/docs/welcome/ http://github.hubspot.com/odometer/docs/welcome/
- joliv 13y ago
  Definitely a better choice. I've used it for a couple projects now, it's very mature. Not so sure about CountUp.js.
- ianstormtaylor 13y ago
  Wow, really nicely done on that landing page. Curious, why'd you make the API depend on a class name instead of assuming something more common like: odometer(el, 42);
  - zackbloom 13y ago
    We've been having fun building things lately with transparent APIs. e.g. You drop Pace[1] in a page, and it figures out how to create a progress bar from it. Odometer is nifty in this way because you can still just set the value with innerHTML or .html, and it will animate it, so the overhead of adding it becomes just adding the class to whatever elements you'd like. You can actually also manually instantiate one pretty much exactly as you described: new Odometer({el: el, value: 42}); [1] - http://github.hubspot.com/pace/docs/welcome/ http://github.hubspot.com/pace/docs/welcome/
    - ianstormtaylor 13y ago
      Wow, Pace just blew my mind. You guys are releasing some really awesome stuff :) random other thing is would be sweet if these were component[1] friendly. (Dunno if you've already checked out component, but it is insanely good for front-end work.) One pattern I picked up from reading TJ's code is the transparent constructor... odometer(el).value(42); ...which I like using to make things that share a bit of state, but are still one-offs, a bit terser. (Coupled with avoiding options objects in general.) Achieved with the following: function Odometer (el) { if (!(this instanceof Odometer)) return new Odometer(el); ... } [1] https://github.com/component/component https://github.com/component/component
      - zackbloom 13y ago
        We try to include component.json files, but we don't use component, so it's usually left to a benevolent pull-requester. We've been using bower more and more, and liking that a lot, but it's essentially arbitrary. It's a bit annoying that npm, bower and component all require their own files to say essentially the same thing. I agree with wrapping the constructor function. Requiring the consumer to remember new adds one more tripping point for users. In this case, I suppose my thought was that the manual-creation path was such a small percentage of users that it wasn't a huge deal.
Gigablah 13y ago
Looks like the behaviour is limited to the first 2 decimals. You can see this if you put 6 random decimal numbers and set the duration to 20. I tried putting 10 decimals and it just shows a string of 0s after the 2nd decimal.
- lifthrasiir 13y ago
  Indeed. It should use the scaling factor of 10^6 (instead of 60). I have submitted a pull req: https://github.com/inorganik/countUp.js/pull/2 https://github.com/inorganik/countUp.js/pull/2
the1 13y ago
that easing
asqwe 13y ago
so easing... really does this need to be library
kevinastone 13y ago
Why would you set `user-scalable=no` but not re-flow for tablets? I really wish Safari would provide an override for these incorrect viewport declarations.
skrebbel 13y ago
doesn't work at all on browsers without requestAnimationFrame support (e.g. Opera 12). I guess that that's fine, but then better display the final number instead of 0.
CatsoCatsoCatso 13y ago
It makes the figure comma formatted, most excellent. I've now implemented this in my ridiculous stock-market simulator game. Looks fantastic. Many thanks OP.
inorganik 13y ago
Thanks to the open-source community, a bunch of improvements and fixes have been made on this: - merged @lifthrasiir's PR. - counts in both directions - easing optional - supports IE8 - optional callback on animation complete - coffeescript and minified versions available

48 points by electic 13y ago

Suggestion: allow passing in target as a DOMElement, rather than by id. That makes this more useful when template rendering in done off-DOM, or when IDs aren't used.

zackbloom 13y ago
If it's an object treat it as a dom node, if it's a string, run it through document.querySelector.

ricardobeat 13y ago

Nothing happens on mobile safari, looks like the button is not clickable?

agildehaus 13y ago

If I have it count up to 1 in 20 seconds, it only takes 10 seconds? It also doesn't seem to be linear, which is fine, but there should be some way to make it linear And why just up? It'd be great if it could also count down.

zackbloom 13y ago

You might also want to look at Odometer: http://github.hubspot.com/odometer/docs/welcome/ http://github.hubspot.com/odometer/docs/welcome/

joliv 13y ago
Definitely a better choice. I've used it for a couple projects now, it's very mature. Not so sure about CountUp.js.
ianstormtaylor 13y ago
Wow, really nicely done on that landing page. Curious, why'd you make the API depend on a class name instead of assuming something more common like: odometer(el, 42);
- zackbloom 13y ago
  We've been having fun building things lately with transparent APIs. e.g. You drop Pace[1] in a page, and it figures out how to create a progress bar from it. Odometer is nifty in this way because you can still just set the value with innerHTML or .html, and it will animate it, so the overhead of adding it becomes just adding the class to whatever elements you'd like. You can actually also manually instantiate one pretty much exactly as you described: new Odometer({el: el, value: 42}); [1] - http://github.hubspot.com/pace/docs/welcome/ http://github.hubspot.com/pace/docs/welcome/
  - ianstormtaylor 13y ago
    Wow, Pace just blew my mind. You guys are releasing some really awesome stuff :) random other thing is would be sweet if these were component[1] friendly. (Dunno if you've already checked out component, but it is insanely good for front-end work.) One pattern I picked up from reading TJ's code is the transparent constructor... odometer(el).value(42); ...which I like using to make things that share a bit of state, but are still one-offs, a bit terser. (Coupled with avoiding options objects in general.) Achieved with the following: function Odometer (el) { if (!(this instanceof Odometer)) return new Odometer(el); ... } [1] https://github.com/component/component https://github.com/component/component
    - zackbloom 13y ago
      We try to include component.json files, but we don't use component, so it's usually left to a benevolent pull-requester. We've been using bower more and more, and liking that a lot, but it's essentially arbitrary. It's a bit annoying that npm, bower and component all require their own files to say essentially the same thing. I agree with wrapping the constructor function. Requiring the consumer to remember new adds one more tripping point for users. In this case, I suppose my thought was that the manual-creation path was such a small percentage of users that it wasn't a huge deal.

Gigablah 13y ago

Looks like the behaviour is limited to the first 2 decimals. You can see this if you put 6 random decimal numbers and set the duration to 20. I tried putting 10 decimals and it just shows a string of 0s after the 2nd decimal.

lifthrasiir 13y ago
Indeed. It should use the scaling factor of 10^6 (instead of 60). I have submitted a pull req: https://github.com/inorganik/countUp.js/pull/2 https://github.com/inorganik/countUp.js/pull/2

the1 13y ago

that easing

asqwe 13y ago

so easing... really does this need to be library

kevinastone 13y ago

Why would you set `user-scalable=no` but not re-flow for tablets? I really wish Safari would provide an override for these incorrect viewport declarations.

skrebbel 13y ago

doesn't work at all on browsers without requestAnimationFrame support (e.g. Opera 12). I guess that that's fine, but then better display the final number instead of 0.

CatsoCatsoCatso 13y ago

It makes the figure comma formatted, most excellent. I've now implemented this in my ridiculous stock-market simulator game. Looks fantastic. Many thanks OP.

inorganik 13y ago

Thanks to the open-source community, a bunch of improvements and fixes have been made on this: - merged @lifthrasiir's PR. - counts in both directions - easing optional - supports IE8 - optional callback on animation complete - coffeescript and minified versions available