A Moving Multi Animated Number Counter That Works When Visible

Multi Animated Counter is a small, configurable plugin for jQuery number counter to count or countdown to the desired number when passing a counter item to display.

Key Features:

Multiple instances on the same page.
Each dashboard begins when it becomes visible in the viewport.
Really easy to implement.
Optional configurable speed for each counter.
The countdown is available.
Configurable relief …

How to make use of 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 component and use the data-TargetNum attribute to find out the number you want to count up to.

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

3. Determine the animation speed using the data-Speed attribute.

<div id="counters_1">
  <div class="counter" 
       data-TargetNum="1234"
       data-Speed="5678">
  </div>
</div>

4. Reverse the counter to create a countdown animation.

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

5. Apply an easing function to the animation.

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

6. Add counter groups to the web 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="1234" data-Speed="1000">0</div>
  <div class="counter" data-TargetNum="5678" data-Speed="4000">0</div>
  <div class="counter" data-TargetNum="777+">0</div>
</div>

<div id="counters_3">
  <div class="counter" data-TargetNum="4000" data-Speed="1000">0</div>
  <div class="counter" data-TargetNum="1234" data-Speed="4000">0</div>
  <div class="counter" data-TargetNum="250+">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;