Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to make your own countUp.js plugin using JavaScript ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article


  1. Document Object Model ( DOM ) 
  2. Use of Classes in ES6

If you are a beginner in JavaScript and have basic programming knowledge then don’t worry, you have landed in a perfect place.

Let us divide the problem into multiple segments:

  1. Implementing a simple structure using HTML.
  2. Providing a basic display style using CSS.
  3. The main programming to implement, the behavior using  JavaScript
    • onclick=”….( )”  : To trigger the function
    • Creating a class with the name Counter
    • Using a constructor to initialize the class
    • Creating the method/function with the name shoot( )  for animation
    • Calling the method shoot from the class Counter

Step 1: Implementing the HTML


<!---inside body---->
<div class="container">
    <img src=
    <div class="main">
        <h1 id="counter"> _______ </h1>
        <!-- This is the target id -->
        <button onclick="trigger()"> START </button>
<!-- Inside body -->
    // Including JavaScript Code

Step 2: Implementing the CSS


.container {
    display: flex;

Step 3: JavaScript


// Creating the Class: Object Prototype
class Counter {
    // Countructor: Initializing the Class
    constructor(data) {
        this.start = data["start"];
        this.end = data["end"];
        this.frames = data["frames"];
        this.step = data["step"]; = data["target"];
    // Method for Animation
    shoot() {
        // Variables
        var count = 0;
        var stepArray = [];
        // Putting the starting Value
            .innerHTML = this.start;
        // Storing the step value in Array
        while (this.end > this.start) {
            this.start += this.step;
            stepArray[count++] = this.start;
        // Doing Countup Animation
        var functional_target =;
        for (let i = 0; i < count; i++) {
            setTimeout(function () {
                    .innerHTML = stepArray[i];
            }, (i + 1) * this.frames);
        // Placing the final value
        setTimeout(function () {
                functional_target).innerHTML = this.end;
        }, count * frames);
// Creating object from class
var animate = new Counter({
    start: 100000,
    end: 2000000,
    frames: 1,
    step: 1000,
    target: "counter"
// Triggering the Class Method
function trigger() {
    // Calling the shoot() method of the class


Custom Countup Preview

Main Used Functions:


The flow of  the Program

This is the basic prototype of the custom countUp.js that we can implement using the concept of Class in JavaScript.

 One can also use their own function to render the values in specific ways.

My Personal Notes arrow_drop_up
Last Updated : 18 Jan, 2021
Like Article
Save Article
Similar Reads
Related Tutorials