Counting Up To Numerical Values On Scroll - jQuery Countup.js

Countup.js is a lightweight (~2kb) jQuery plugin that animates a numerical value by counting up from zero when you scroll to it. The animation delay and transition are fully configurable. It uses jQuery Waypoint plugin to trigger the countUp function when you scroll to a specific number.

See also:

• Animating Numbers Counting Up with jQuery Counter-Up Plugin
• jQuery Plugin For Counting Up Number While Scrolling - numscroller
• Simple jQuery Animated Counter With Easing Support - SimpleCounter.js
• Tiny Animated Counter Plugin With jQuery - Incremental Number
• Simple Number Animation Plugin With jQuery - Counter
• Basic jQuery Count Up Plugin - countUp.js

How to use it:

1. Include the necessary jQuery library and the jQuery Waypoint plugin right before the closing body tag.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.waypoints.min.js"></script>

2. Include the jQuery Countup.js script after jQuery.

<script src="jquery.countup.js"></script>

3. Wrap the numerical values into HTML elements as follows. The plugin currently supports integers, floats and formatted numbers.

<span class="counter">1,234,567.89</span>
<span class="counter">99.99</span>
<span class="counter">1234567</span>

4. Call the function and you'll see the magic when you scroll down/up the webpage.

$('.counter').countUp();

5. The plugin provides 2 ways to config the countup animation: via data attributes:

<span class="counter" 
      data-counter-time="2000" 
      data-counter-delay="10">
      123456789
</span>

6. Or via JavaScript when init.

$('.counter').countUp({
  'time': 2000,
  'delay': 10
});

---

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