countup

Animates a numerical value by counting to it

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

The only file you need is countUp.js.

If you want to get fancy with build systems, a gulpfile is included. Read more here.

Included is an angular module. Use the count-up attribute to quickly create an animation. It also integrates nicely with the angular-scroll-spy directive. The Angular directive only requires an end-val attribute, but will also accept start-val, duration, and decimals. id is not needed. You must include both countUp.js and the module to use the angular directive. Check out the angular demo.

If you want a quick and easy way to use this on your WordPress site, try this plugin by @4DMedia: https://wordpress.org/plugins/countup-js/

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 = (see demo, optional) 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);
numAnim.start();

with optional callback:

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

For angular:

<h2 count-up end-val="873.4"></h2>

Width angular-scroll-spy:

<h2 count-up id="numberAnimation" end-val="873.4" scroll-spy-event="elementFirstScrolledIntoView" scroll-spy></h2>

Toggle pause/resume:

numAnim.pauseResume();

Reset an animation:

numAnim.reset();

Update the end value and animate:

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