Animated Number Counter That Runs When Visible

A tiny and configurable jQuery number counter plugin for counting up or counting down to the desired number when the counter element is scrolled into view.

How to use it:

1. Download and insert the multi-animated-counter.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/multi-animated-counter.js"></script>

2. Create a counter element and use the data-TargetNum attribute to determine the number you want to countup to.

<div id="counters_1">
  <div class="counter" 
       data-TargetNum="98765">
  </div>
</div>

3. Determine the animation speed using the data-Speed attribute. Default: 3000ms.

<div id="counters_1">
  <div class="counter" 
       data-TargetNum="98765"
       data-Speed="7000">
  </div>
</div>

4. Reverse the counter to create a countdown animation.

<div id="counters_1">
  <div class="counter" 
       data-TargetNum="98765"
       data-Direction="reverse">
  </div>
</div>

5. Apply an easing function to the animation. 'linear' or 'swing'.

<div id="counters_1">
  <div class="counter" 
       data-TargetNum="98765"
       data-Easing="linear">
  </div>
</div>

6. Add counter groups to the page as follows:

<div id="counters_1">
  <div class="counter" data-TargetNum="10" data-Speed="6000"></div>
  <div class="counter" data-TargetNum="7" data-Speed="7000" 
  data-Direction="reverse" data-Easing="linear"></div>
  <div class="counter" data-TargetNum="80333" data-Speed="2500">0</div>
</div>

<div id="counters_2">
  <div class="counter" data-TargetNum="4200" data-Speed="1000">0</div>
  <div class="counter" data-TargetNum="4500" data-Speed="4000">0</div>
  <div class="counter" data-TargetNum="4743">0</div>
</div>

<div id="counters_3">
  <div class="counter" data-TargetNum="5200" data-Speed="1000">0</div>
  <div class="counter" data-TargetNum="5500" data-Speed="4000">0</div>
  <div class="counter" data-TargetNum="5743">0</div>
</div>

7. Default global settings.

// must be an array, could have only one element
let visibilityIds = ['#counters_1', '#counters_2', '#counters_3']; 

// default counter class
let counterClass = '.counter';

// default animation speed
let defaultSpeed = 3000; 

---

This awesome jQuery plugin is developed by pablog1. For more Advanced Usages, please check the demo page or visit the official website.