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 0duration
= duration in seconds, default 2options
= object that determines number formatting and toggles easing - see demo
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
})
Stop an animation in progress:
numAnim.stop();
Resume a stopped animation:
numAnim.resume();
Reset an animation:
numAnim.reset();