Package Exports

countup.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (countup.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CountUp.js

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.

Try the demo

Please note

Angular 1 and 2 modules used to be part of this repo. As of v1.9.0, they have moved. See links below.

Installation

Simply include the countUp.js file in your project or install via npm or bower using the package name countup.js or countUp.js respectively.

Before making a pull request, please read this. MIT License.

A jQuery version is also included in case you like dollar signs.

Usage:

Params:

target = id of html element, input, svg text element, or var of previously selected element/input where counting occurs
startVal = the value you want to begin at
endVal = the value you want to arrive at
decimals = (optional) number of decimal places in number, default 0
duration = (optional) duration in seconds, default 2
options = (optional, see demo) formatting/easing options object

Decimals, duration, and options can be left out to use the default values.

var numAnim = new CountUp("SomeElementYouWantToAnimate", 24.02, 99.99);
if (!numAnim.error) {
    numAnim.start();
} else {
    console.error(numAnim.error);
}

with optional callback:

numAnim.start(someMethodToCallOnComplete);

// or an anonymous function
numAnim.start(function() {
    // do something
})

Other methods:

Toggle pause/resume:

numAnim.pauseResume();

Reset an animation:

numAnim.reset();

Update the end value and animate:

var someValue = 1337;
numAnim.update(someValue);

Animating to large numbers

For large numbers, since CountUp has a long way to go in just a few seconds, the animation seems to abruptly stop. The solution is to subtract 100 from your endVal, then use the callback to invoke the update method which completes the animation with the same duration with a difference of only 100 to animate:

var endVal = 9645.72;
var numAnim = new CountUp("targetElem", 0, endVal - 100, 2, duration/2);
numAnim.start(function() {
    numAnim.update(endVal);
});

Contributing

Before you make a pull request, please be sure to follow these super simple instructions:

Do your work on countUp.js and/or other files in the root directory.
In Terminal, cd to the countUp.js directory.
Run npm install, which installs gulp and its dependencies.
Run gulp, which copies and minifies the .js files to the dist folder.

countup.js