Count Up Numbers on Page Scroll
Add count up numbers on page scroll to your Webflow site via this Javascript code. This method allows you to add a count up numbers via a page scroll to your Webflow site. As the user scrolls down numbers start to count up as they enter the viewport.
Add count up numbers on page scroll to your Webflow site via this Javascript code. This method allows you to add a count up numbers via a page scroll to your Webflow site. As the user scrolls down numbers start to count up as they enter the viewport.
How to add it
- Add a class of counter to a number, do not use any commas in the initial number within the HTML as the JS will automatically ad them.
- Add the Javascript code to the sections as mentioned in the commented markup
The code
Javascript
<!-- Add to head section -->
<script src="https://unpkg.com/animejs@3.1.0/lib/anime.min.js"></script>
<!-- Add to closing body -->
<script>
function countup(el, target) {
let data = { count: 0 };
let start = target - 200; //Starting value
anime({
targets: data,
count: [start, target],
duration: 800,
round: 1,
delay: 200,
easing: 'easeOutCubic',
update() {
el.innerText = data.count.toLocaleString();
} });
}
function makeCountup(el) {
const text = el.textContent;
const target = parseInt(text, 10);
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
countup(el, target);
io.unobserve(entry.target);
}
});
});
io.observe(el);
}
const els = document.querySelectorAll('.counter'); //Class to add to target
els.forEach(makeCountup);
</script>
