Number Counter to Start on View

Ask the community
,
1

I have multiple number counters on a page and I want them to start when they get into view, not when you get to the page as they are in the middle of the page. The code that I am using is below, this code works but only when you first visit the page. I have seen some suggestions on here but nothing has worked for me.

let startNum = 0 ;
let endNum = 34 ;
const duration = 150 ;

$w . onReady ( function () { setInterval (() => { countUp (); }, duration ); });

function countUp ( ) {
if ( startNum <= endNum ) {
$w ( ‘#textnumber1’ ). text = startNum . toString ();
startNum ++;
}
}
let startNum1 = 0 ;
let endNum1 = 27 ;
const duration1 = 150 ;

$w . onReady ( function () { setInterval (() => { countUp1 (); }, duration1 ); });

function countUp1 ( ) {
if ( startNum1 <= endNum1 ) {
$w ( ‘#textnumber2’ ). text = startNum1 . toString ();
startNum1 ++;
}

}

2

If you want it to start counting when it enters the page you need to use the onViewportEnter function. Put this inside your onReady() function rather than the setInterval you’re currently using.

$w('#textnumber2').onViewportEnter(()=>{
    setInterval(()=>{
    countUp();
    },
    duration);
})
3

Thank you!!