animating numbers counting Javascript

• Animated number counter with Javascript

  <!-- HTML element to display counter animation -->
  <span id="counter"></span>
  
  <!-- Counter animation script -->
  <script type="text/javascript">
  const counterAnim = (qSelector, start = 0, end, duration = 1000) => {
      const target = document.querySelector(qSelector);
      let startTimestamp = null;
      const step = (timestamp) => {
          if (!startTimestamp) startTimestamp = timestamp;
          const progress = Math.min((timestamp - startTimestamp) / duration, 1);
          target.innerText = Math.floor(progress * (end - start) + start);
          if (progress < 1) {
              window.requestAnimationFrame(step);
          }
      };
      window.requestAnimationFrame(step);
  };
  
  counterAnim("#counter", 0, 100, 5500);
  </script>
  

  This code snippet used to display the counter animation using javascript. Here we have a function counterAnim() and You have to pass the targert elemet, starting animation counter number, target animation counter number and the speed of counter. Simply copy/paste code and you can display counter in your browser.

Back to code snippet queries related javascript