Custom code a number counter that starts counting after you scroll to a certain point on the page.

Ask the community
,
1

Steps so far:

  1. I’ve created a strip named “TickerTransitionPoint” to mark the point at which I’d like the ticker to start
  2. I have a text box named “text334” with the text that should count up.
  3. I’ve trialled the code below, but the number remains static.

Cant work out what I’m missing/ have done wrong?

//Counter for Providers//

let startNum = 0 ;
let endNum = 35 ;
const duration = 150 ; // 1000 milliseconds

$w . onReady ( function () {
$w ( “#TickerTransitionPoint” ). onViewportLeave (()=> {
setInterval (()=> {
countUp ();
}, duration );
});

function countUp (){
if ( startNum <= endNum ){
$w ( ‘#text334’ ). text = startNum . toString ();
startNum ++;
}
}

2

You can use → onVieportEnter of a certain element. When you pass this element, while scrolling, an event will be triggered, which would start your function.

3

Hi Lisa,

You need to start the counter when the strip enters the viewport of your screen, while you don’t have such a thing in your code.

Do it like this.

let timer; // The countup timer;

$w.onReady(() => {
    const strip = $w("#TickerTransitionPoint");
    
    strip.onViewportEnter(() => startCounting());
    strip.onViewportLeave(() => stopCounting());
})

function startCounting() {    
    const settings = {
        endNum: 35,
        current: 0
    }
    
    const addition = endNum / endIn
    timer = setInterval(() => {
        $w('#counter').text = current.toString();
        current++        
    }, 150)
}

function stopCounting() {
    if (timer) {
        clearInterval(timer);
        timer = undefined;
    }
}

NOTE: The smallest interval value is 4ms.