Count Up Numbers on Page Scroll
When scrolling down the page numbers count up as they enter browser view via this Javascript snippet on your Webflow site. An easy way to add number count up to your Webflow site.
When scrolling down the page numbers count up as they enter browser view via this Javascript snippet on your Webflow site. An easy way to add number count up to your Webflow site.
How to add it
- Add the Javascript code snippet to your Page custom code settings before the body closing tags
- Create DIVs using class counter and number text to count to
The code
Javascript
<script src="https://unpkg.com/counterup2@2.0.2/dist/index.js"> </script>
<script>
$( document ).ready( function() {
jQuery(function ($) {
"use strict";
var counterUp = window.counterUp["default"]; // import counterUp from "counterup2"
var $counters = $(".counter");
/* Start counting, do this on DOM ready or with Waypoints. */
$counters.each(function (ignore, counter) {
var waypoint = new Waypoint( {
element: $(this),
handler: function() {
counterUp(counter, {
duration: 5000,
delay: 16
});
this.destroy();
},
offset: 'bottom-in-view',
} );
});
});
});
</script>
HTML
<section>
<div class="counter">120.365</div>
<div class="counter">100</div>
<div class="counter">500,00</div>
<div class="counter">321</div>
</section>
<section>
<div class="counter">322</div>
<div class="counter">210</div>
<div class="counter">125</div>
<div class="counter">257</div>
</section>
