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.

It also provides a scroll spy option which allows you to trigger the animation when the element is scrolled into view.

How to use it:

Import the CountUp.js library into your web project.

# NPM
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.

myDemo.start();

Pause & resume the animation.

myDemo.pauseResume();

Reset the animation.

myDemo.reset();

Update the numeric value.

var newValue = 1999;
myDemo.update(newValue);

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, 

    // 1,00,000 vs 100,000
    useIndianSeparators: false,

    // 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: [],

    // enable scroll spy
    enableScrollSpy: false,

    // delay in ms
    scrollSpyDelay: 200,

    // run only once
    scrollSpyOnce: true,

    // callbacks
    onCompleteCallback: function(){},
    onStartCallback: function(){},
    
});

Changelog:

v2.8.1 (04/23/2025)

• Provide package.json “exports” for compatibility with modern build systems.

v2.8.0 (08/26/2023)

• Added onStartCallback option, useful for when scroll spy is enabled

v2.7.0 (06/29/2023)

• update

v2.6.2 (05/01/2023)

• bugfix

v2.6.1 (05/01/2023)

• rebuild

v2.6.0 (03/13/2023)

• Support animation plugins: A plugin is a class instance or object passed in options for the plugin param that implements a render method.
• The plugin’s render method will be called on each frame to display the formatted value instead of CountUp’s.

v2.5.0 (03/01/2023)

• Added new option, onCompleteCallback which gets called when the animation completes. You can still pass a callback to the start method, and it will override whatever is passed in the options.

v2.4.2 (01/29/2023)

• Make it so when scroll spy is enabled, and scrollSpyOnce is false, CountUp will re-animate when scrolling up, as well as down

v2.4.1 (01/25/2023)

• Added Indian separators option useIndianSeparators which will format a number like “1,00,000” instead of “100,000”
• Added null check in printValue method to potentially fix react issue

v2.3.2 (07/10/2022)

• Fixed a bug where, when using smart easing and counting down, the animation would take longer than configured. It also fixed an issue which caused 2 easing cycles to run for the same scenario.

v2.3.1 (06/29/2022)

• Fix window check for SSR

v2.3.0 (06/28/2022)

• Fixes an issue where, when the counter element’s parent is position: relative the scrollSpy function does not trigger when the element scrolls into the view

v2.2.0 (05/18/2022)

• Added an option to make scroll spy triggered animations run only once

v2.1.0 (03/03/2022)

• New scroll spy option to trigger animation when the element is scrolled into view.

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

The post Customizable Count Up/Down Animations In Pure JavaScript – CountUp.js appeared first on CSS Script.