CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.
Despite its name, CountUp can count in either direction, depending on the startVal and endVal params that you pass.
CountUp.js supports all browsers.
Params:
target= id of html element, input, svg text element, or var of previously selected element/input where counting occursstartVal= the value you want to begin atendVal= the value you want to arrive atdecimals= number of decimal places in number, default 0 (optional)duration= duration in seconds, default 2 (optional)options= formatting/easing options object (see demo, optional)
Decimals, duration, and options can be left out to use the default values.
var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99);
numAnim.start();with optional callback:
numAnim.start(someMethodToCallOnComplete);
// or an anonymous function
numAnim.start(function() {
// do something
})Toggle pause/resume:
numAnim.pauseResume();Reset an animation:
numAnim.reset();Update the end value and animate:
var someValue = 1337;
numAnim.update(someValue);