Fix simple count up script
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I have been trying to use the simple CounterUp script to animate number animations on a page, but the script is buggy.

ISSUES:

1) The script is so old that it depends on Waypoints 1.0. Upgrade the script to use Waypoints 4.0 (latest) which changed the specifications, making line 86 not work as supposed (the animation is triggered many times instead of just once). I wrote a hack to prevent this. You may improve it or take it out as necessary..

2) If I scroll fast leaving the animation out of view, I get the following error:
jquery.counterup.js:66 Uncaught TypeError: Cannot read property 'shift' of null
at f (jquery.counterup.js:66)

..the worst thing about this error, is that the count up animation stops, leaving number being a really small number (or even 0) instead of the final number - making this a critical error (e.g: "Customers in 0 countries"!). I suggest either fixing it so it never breaks, or using a try-catch block so that if there is any type of error make the number be the final target.

3) I want the number count to start at 20% of the target number, instead of 0. So if the target number is 100, it should start counting at 20 up to 100, instead of counting from 0 - automatically.

SCRIPT TO FIX: https://pastebin.com/fWYuKGi8

ALTERNATIVE SOLUTION An alternative is to provide another script implementation that uses Waypoints 4.0, and has the same functionality.
You may try the newer version I just found: https://github.com/ciromattia/jquery.counterup. If this upgrade solves all bugs, ensure to fix it to work with Waypoints 4.0, latest jquery version, and a try catch block so that if for whatever reason it breaks, the final number is displayed. And implement (3) - count from 30%..

With this script, I just add just a class, and it will automatically detect the format (add commas, etc), and run the animation automatically when the element is on view - without any further configuration.
<span class="countAnimation">55,700</span>

The issue 2 is related to issue 1. Clearly as the script is triggered many times, the animation data is corrupted.So most likely solving issue 1 will solve issue 2.
georgefountain 6 days ago

Crowdsource coding tasks.

2 Solutions


Hi George,

I used the forked version by ciromattia with jQuery 3.3.1 and Waypoints 4.0.1 and it seems to work.

I created a function that calculates the 20% offset and applies it to the counterUp jQuery plugin.

Working CodePen sample

JavaScript

function counterUp(element, startAtPercentage) {
    if (startAtPercentage == null) {
        startAtPercentage = 20;
    }

    var numericValue = getNumericValue(element);

    jQuery(element).counterUp({
        beginAt: (numericValue > 0)
            ? (numericValue * startAtPercentage / 100)
            : undefined,
    });
}

function getNumericValue(element) {
    try {
        return Number(element.innerText
            // Remove decimal points
            .replace(/.\D+/g, '')
            // Remove thousands separator and other symbols
            .replace(/\D/g, ''));
    } catch (error) {
        return 0;
    }
}

// Apply it to all elements with vanilla JavaScript
Array.from(document.querySelectorAll('.countAnimation'))
    .forEach(element => counterUp(element, 20));

// ... or jQuery
// jQuery('.countAnimation').each(function (index, element) {
//     counterUp(element, 20);
// });

Sample HTML

<p>
  <span class="countAnimation">55,700</span>
</p>

<p>
  <span class="countAnimation">155,700</span>
</p>

<p>
  <span class="countAnimation">255,700</span>
</p>

<p>
  <span class="countAnimation">355,700</span>
</p>
Thank you :) Could you confirm it works on all browsers including IE 9, Firefox, and Safari? Thanks :)
georgefountain 1 day ago

The following script supports all features you want - natively- and works with the newest version of Waypoints:

1000

https://github.com/ciromattia/jquery.counterup

View Timeline