CountUp.js
11–19 of 19 posts
Re: CountUp.js
#12You might also want to look at Odometer: http://github.hubspot.com/odometer/docs/welcome/
Re: CountUp.js
#13You might also want to look at Odometer: http://github.hubspot.com/odometer/docs/welcome/
odometer(el, 42);Re: CountUp.js
#14You might also want to look at Odometer: http://github.hubspot.com/odometer/docs/welcome/
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);
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/Re: CountUp.js
#15Earlier quoted context omitted.
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);
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 pre…
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/componentRe: CountUp.js
#16Earlier quoted context omitted.
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 pre…
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…
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.
Re: CountUp.js
#17Re: CountUp.js
#18I've now implemented this in my ridiculous stock-market simulator game. Looks fantastic. Many thanks OP.
Re: CountUp.js
#19- merged @lifthrasiir's PR. - counts in both directions - easing optional - supports IE8 - optional callback on animation complete - coffeescript and minified versions available