So I was minding my own business peacefully putting together this little website. Nothing all that complicated even to me even though I hadn’t built a site in a while.
Though there was this one feature powered by waypoints.js and jquery.counterup.js that kept going wrong.
We had this little bit of animation in place to make 2 sets of numbers count up to the actual stats we wanted to display. The counter action should trigger whenever the div was in view: by scrolling down the page to the stats div, the numbers should start “counting up” and then stop on the right number. And it should fire more than once. Go back to the top and scroll down again no matter how many times the numbers should count and stop on the right numbers. It worked OK until around the 5th or 6th time you scrolled down. Then line 62 of jquery.counterup.js would throw an error: Uncaught TypeError: Cannot read property ‘shift’ of null. Stats would still animate but the final numbers would be the wrong ones.
CounterUp is in GitHub https://github.com/bfintal/Counter-Up and I tried digsite’s fork . This fork fixes the problem when jquery.counterup.js is used with the more current versions of waypoints.js. But then it only allows the stats animation to trigger once. We wanted it to be triggered any time the stats div came into view. Then I want back to the original and found this issue: https://github.com/bfintal/Counter-Up/issues/23 which was fixed around a week ago – just when I needed to wrap up my little web project! A web miracle! The same error (Uncaught TypeError: Cannot read property ‘shift’ of null) is logged in Console but the stats numbers stay correct each time the animation is triggered and then stops, thanks to the fix by https://github.com/zxl9171.