Animating Numbers Counting Up with Counter-Up Plugin

Counter Up is a lightweight and easy-to-use jQuery JavaScript plugin that dynamically counts up to a targeted number (from 0) at a specified speed.

Note that the Counter Up v2 has removed the jQuery dependency. You can download the jQuery v1 version here.

See also:

• jQuery Plugin For Countdown & Count Up Timer - runner

Installation:

# NPM
$ npm install counterup2 --save

Basic Usage (v2):

1. Define an end time in the span tag.

<span class="counter">12345</span>
<span class="counter">123.45</span>
<span class="counter">12,345.00</span>

2. Import the Counter Up library.

// ES6
import counterUp from 'counterup2' 

<!-- Or From The CDN -->

3. Initialize the library and config the duration & delay and we're done.

counterUp(document.querySelector('.counter') {
  duration: 1000,
  delay: 16
})

4. The plugin also works with the waypoints plugin that executes the count up animations whenever you scroll to the span tags.

<script src="waypoints.min.js"></script>

const el = document.querySelector('.counter')
new Waypoint( {
    element: el,
    handler: function() { 
      counterUp( el ) 
      this.destroy()
    },
    offset: 'bottom-in-view'
})

Changelog:

2019-06-03

• V2

---

This awesome jQuery plugin is developed by bfintal. For more Advanced Usages, please check the demo page or visit the official website.