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);