Animates a Numerical Value by Counting in Pure JavaScript | CountUp.js

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


  • 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 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.


Pause & resume the animation.


Reset the animation.


Update the numeric value.

var newValue = 1999;

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

See Demo And Download

Official Website(inorganik): Click Here

This superior jQuery/javascript plugin is developed by inorganik. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…