In this lesson, you will learn how to apply the number count up effect once your users starts scrolling down the website.
Before you copy the code to your website, we highly suggest you watch our video to make sure you set up your website correctly:
let startNum = 1; let endNum = 800; const duration = 3; // 1000 milliseconds $w.onReady(function () { }); function countUp() { if (startNum <= endNum) { $w('#numberText').text = startNum.toLocaleString(); startNum += 1; } } export function columnStrip2_viewportEnter(event) { setInterval(() => { countUp(); }, duration); }
To make this code work properly on your website, make sure you either change the name of your text element to "numberText" or change the code to match the name you gave the text.
Also, if the code does not work for you, then create your own viewportEnter event handler and copy the code below into your event handler function:
setInterval(() => { countUp(); }, duration);
Have fun!
If you need assistance with getting this set up on your website, then you can reach out on our website here.