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

Category: Javascript , Recommended | March 13, 2023
Author:inorganik
Views Total:79 views
Official Page:Go to website
Last Update:March 13, 2023
License:MIT

Preview:

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

Description:

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,
    // callback
    onCompleteCallback: function(){},
    
});

Changelog:

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

You Might Be Interested In:


Leave a Reply