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 2 months ago
awarded to LayZee

Crowdsource coding tasks.

2 Solutions


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

1000

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

Winning solution

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 (ES5)
Array.prototype.forEach.call(
    document.querySelectorAll('.countAnimation'),
    function (element) {
        counterUp(element, 20);
    });

// ... or with 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 2 months ago
Have you checked if the script works on IE 9 or if any modifications are necessary? Thanks!
georgefountain 2 months ago
I can spin up a virtual machine with IE9 and test it. Give me 2 days since I am busy until tomorrow evening.
LayZee 2 months ago
Thanks, I appreciate it :) Sure.
georgefountain 2 months ago
macOS Safari and latest Firefox for Windows as well?
LayZee 2 months ago
Yes please check that too!
georgefountain 2 months ago
I updated the Vanilla JavaScript code to be compatible with Internet Explorer 9 in both this solution and the CodePen. Tested in Chrome 68 for Windows, Firefox 61 for Windows, Internet Explorer 9, Internet Explorer 11 and Edge 17. I can test macOS Safari in a few days.
LayZee 2 months ago
You are amazing! Thanks Layzee :) Is any change required on the libraries? And yes, if you can check it would be wonderful!
georgefountain 2 months ago
No changes are needed in the libraries. Just make sure that you use the forked version of CounterUp by ciromattia.
LayZee 2 months ago
Hi George. It also checks out in macOS Safari 11.1.1.
LayZee 1 month ago
Thanks Layzee! You are amazing. Really appreciated. Would you like to take a look at the new CSS/JS bounty I posted? https://bountify.co/clone-apple-com-mobile-menu-and-enhance-it
georgefountain 1 month ago
View Timeline