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

Category: Javascript , Recommended | July 10, 2022
Author:inorganik
Views Total:913 views
Official Page:Go to website
Last Update:July 10, 2022
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, 
    // 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,
    
});

Changelog:

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