Customizable Count Up/Down Animations In Pure JavaScript – CountUp.js

Category: Javascript , Recommended | July 28, 2021
Views Total:838 views
Official Page:Go to website
Last Update:July 28, 2021


Customizable Count Up/Down Animations In Pure JavaScript – CountUp.js


CountUp.js is a lightweight, simple-to-use JavaScript library that allows to animates countups and countdowns with custom easings , separators, decimals, suffixes and prefixes. Also available as Angular 1.x / 2.x directives and a WordPress plugin.

How to use it:

Import the CountUp.js library into your web project.

npm install countup.js

# Bower
bower install countup.js
<script src="countUp.js"></script>

Create a new countup object and specify the target element and start/end numeric values.

var myDemo = new CountUp("yourElement", 22, 99.99);

Start the animation.


Pause & resume the animation.


Reset the animation.


Update the numeric value.

var newValue = 1999;

Possible options with default values.

var myDemo = new CountUp("yourElement", 22, 99.99,{

    // start value
    startVal: 0,

    // number of decimal places
    decimalPlaces: 0,

    // duration in seconds
    duration: 2,

    // smooth easing for large numbers above this if useEasing
    smartEasingThreshold: 999,

    // amount to be eased for numbers above threshold
    smartEasingAmount: 333,
    // toggle easing
    useEasing : true, 

    // 1,000,000 vs 1000000
    useGrouping : true, 

    // character to use as a separator
    separator : ',', 

    // character to use as a decimal
    decimal : '.', 

    // optional custom easing closure function, default is Robert Penner's easeOutExpo
    easingFn: null, 

    // optional custom formatting function, default is self.formatNumber below
    formattingFn: null,

    // optional text before the result
    prefix: '', 

    // optional text after the result
    suffix: '', 

    // optionally pass an array of custom numerals for 0-9
    numerals: []


v2.0.8 (07/28/2020)

  • Add “module” in package.json
  • remove TSLint
  • add ESLint

v2.0.7 (08/26/2020)

  • fixed: Value is not updated correctly when navigating quickly to value

v2.0.6 (08/08/2020)

  • allow certain options to be changed after instantiation
  • UMD module now included

v2.0.4 (06/20/2019)

  • Rewritten in Typescript

v1.9.3 (09/21/2018)

  • Update

You Might Be Interested In:

Leave a Reply