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. Bower and Component .json files are included.
countUp.js supports all browsers.
Params:
target
= id of html element, input 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, 2, 1.5);
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();