Function to animate number count-up


<div class="ani">
  <div class="counterup" data-count="15">0</div>
  <div class="counterup" data-count="20">0</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Function to animate number count-up
  function animateCountUp(element) {
    var finalCount = parseInt($(element).attr('data-count'));
    var duration = 3000; // Adjust duration as needed
    var interval = 50;
    var increment = finalCount / (duration / interval);
    var currentCount = 0;

    var counter = setInterval(function() {
      currentCount += increment;
      if (currentCount >= finalCount) {
        clearInterval(counter);
        currentCount = finalCount;
      }
      $(element).text(Math.round(currentCount));
    }, interval);
  }

  // Check for the addition of 'active' class and trigger count-up animation
  $('.ani').on('click', function() {
    $(this).find('.counterup').each(function() {
      animateCountUp(this);
    });
  });
});
</script>