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

Category: Javascript , Recommended | June 20, 2019
Author: inorganik
Views Total: 4,517
Official Page: Go to website
Last Update: June 20, 2019
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. 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
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: []
    
});

Changelog:

v2.0.4 (06/20/2019)

  • Rewritten in Typescript

v1.9.3 (09/21/2018)

  • Update

You Might Be Interested In:


Leave a Reply