Animates a Numerical Value by Counting in Pure JavaScript

CountUp.js is a lightweight, dependency-free JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.

Despite its name, CountUp can count in any direction, depending on the start and end values you pass.

css number counter animation, animated number counter website, pure css number counter animation, animated number counter online, animated counter generator

Features:

Highly customizable with a huge range of options, you can even replace numbers.
Intelligent Smoothing: CountUp intelligently delays the smoothing until it gets close enough to the final value of the smoothing to be visually noticeable. configurable in options.
Separate packages for modern and legacy browsers, with and without the AnimationFrame polyfill request. Choose countUp.min.js for modern browsers or countUp.withPolyfill.min.js for IE9 and earlier, and Opera mini.

How to make use of it:

Import the CountUp.js library into your web undertaking.

# NPM
npm install countup.js

# Bower
bower install countup.js

<script src="countUp.js"></script>

Create a brand new countup object and specify the goal aspect 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 choices 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: []
    
});

Customizable Count Up/Down Animations, CountUp.js Plugin/Github, jquery number counter animation on scroll, number counter css