Number Counter

About this module

A statistic counter that animates from zero to its target using GSAP's innerText snapper.

Installation

1. 1

   Install GSAP

   Install the animation library with your package manager.

   npm install gsap

2. 2

   Create the files

   Create `index.html`, `style.css` and `script.js` in the same folder.

3. 3

   Paste the code

   Copy each file's source into its matching file.

4. 4

   Run it

   Open `index.html` (or import the logic into your bundler setup).

Usage

1. 1

   Copy the HTML

   Paste the markup where you need it.

   <link rel="stylesheet" href="style.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
   <script src="script.js"></script>
   <div class="mh-counters">
     <div><span class="mh-count" data-target="1200">0</span><small>Modules</small></div>
     <div><span class="mh-count" data-target="3200000">0</span><small>Copies</small></div>
   </div>

2. 2

   Paste the script

   Include `script.js` after GSAP.

   document.querySelectorAll(".mh-count").forEach((el) => {
     const target = Number(el.dataset.target);
     const obj = { val: 0 };
     gsap.to(obj, {
       val: target,
       duration: 1.6,
       ease: "power2.out",
       onUpdate: () => {
         el.textContent = Math.round(obj.val).toLocaleString("en-US");
       },
     });
   });