ciromattia/jquery.counterup

jquery.counterup is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.

DISCLAIMER: orphan project

I forked this little library for personal use some years ago, nowadays I don't think it's jQuery time anymore and I try to get rid of it everywhere I can.

Thus, this fork is now orphan, I won't read or fix issues anymore; if someone is willing to take over it it's welcome!

Anyway, please consider that in 2022 you can do the same thing easily and without jQuery and waypoint.js (with AlpineJS, for example).

jquery.counterup

jquery.counterup is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:

• integers 12345
• floats 0.1234
• formatted numbers 1,234,567.00
• time 21:45:00

Features:

• Auto-detect for integers, floats or formatted numbers.
• The plugin will also use the number of decimal places the original number is using.
• Start counter with a different duration and delay by setting data-counterup-time="" and data-counterup-delay="".
• Lets you use your own formatter.
• Lightweight: ~1kb
• Minimal setup

Requires waypoints.js

Demo

DEMO

Install with Bower

bower install jquery.counterup

=====

Include

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

HTML

With default values from plugin instantiation.

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

With values from data attribute.

<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

jQuery

$('.counter').counterUp();

or with extra parameters

$('.counter').counterUp({
    delay: 10,
    time: 1000,
    offset: 70,
    beginAt: 100,
    formatter: function (n) {
      return n.replace(/,/g, '.');
    }
});

delay - The delay in milliseconds per number count up

time - The total duration of the count up animation

offset - The viewport percentile from which the counter starts (by default it's 100, meaning it's triggered at the very moment the element enters the viewport)

beginAt - The number from which to count up

formatter - A callback to format the number with