Rolling Numbers Code Update

Rolling Numbers Code Update

Getting a rolling numbers effect in Webflow using the jQuery counterUp library.

Keegan Leary
Keegan Leary

Was trying to follow this video to add a rolling (counting up) numbers effect in Webflow but the code may be outdated and was throwing a 404 Not Found error in console.

Here's code that works as of OCT 2021. Paste this into the "Before </body> tag" box in page settings and make sure the number you want to animate has the class 'counter' applied.


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

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  // DOMready has fired
  // May now use jQuery and Webflow api
  $('.counter').counterUp({
    delay: 10,
    time: 2000
	});
});

</script>
Coding

Keegan Leary

I'm the dude the website is about.