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

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.

Before adding count-up animation code to production, an AI code review tool can help check scroll triggers, number formatting, and edge cases around repeated animations.

Alternatives:

• CountUp.js: Vanilla JS Animated Number Counter Options & Examples
• 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
• Count Up To A Number At A Specified Speed - Counter.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.