Number Animation - Play one time only

Ask the community
,
1

Hi,

i would like to ask how can add the code to the site so that the number counting animation run for one time only. as for my site it run every time when SCROLLING back to this section.

2796×962 269 KB

/NUMBER ANIMATIONS

$w.onReady(() => {

    $w('#numbrands').onViewportEnter(() => {
        let count = 0 //starting number
        const endTime = 35 // ending number
        const interval = 1 // spped of the count in ms
        const counter = setInterval(() => {
            $w('#numbrands').text = String(count) // update text
            count === endTime && clearInterval(counter)
            count++
        }, interval)
    })
})

$w.onReady(() => {

    $w('#nummaterials').onViewportEnter(() => {
        let count = 0 //starting number
        const endTime = 300 // ending number
        const interval = 1 // spped of the count in ms
        const counter = setInterval(() => {
            $w('#nummaterials').text = String(count) // update text
            count === endTime && clearInterval(counter)
            count++
        }, interval)
    })
})

$w.onReady(() => {

    $w('#numcustomer').onViewportEnter(() => {
        let count = 0 //starting number
        const endTime = 1000 // ending number
        const interval = 1 // spped of the count in ms
        const counter = setInterval(() => {
            $w('#numcustomer').text = String(count) // update text
            count === endTime && clearInterval(counter)
            count++
        }, interval)
    })
})
2 
$w.onReady(() => {let counterStatus = false;
    $w('#numbrands').onViewportEnter(()=>{
        if(counterStatus===false) {
            countBrands();
            countMaterials();
            countCustomers();
            counterStatus = true;
        }
        else {}
    });
    //$w('#nummaterials').onViewportEnter(()=>{countMaterials();});
    //$w('#numcustomer').onViewportEnter(()=>{countCustomers();});
});

function countBrands(params) {
     let count = 0 //starting number
    const endTime = 35 // ending number
    const interval = 1 // spped of the count in ms
    const counter = setInterval(() => {
        $w('#numbrands').text = String(count) // update text
        count === endTime && clearInterval(counter);
        count++
    }, interval);
}

function countMaterials(params) {
    let count = 0 //starting number
    const endTime = 300 // ending number
    const interval = 1 // spped of the count in ms
    const counter = setInterval(() => {
        $w('#nummaterials').text = String(count) // update text
        count === endTime && clearInterval(counter);
        count++
    }, interval);
}

function countCustomers(params) {
    let count = 0 //starting number
    const endTime = 1000 // ending number
    const interval = 1 // spped of the count in ms
    const counter = setInterval(() => {
        $w('#numcustomer').text = String(count) // update text
        count === endTime && clearInterval(counter)
        count++
    }, interval)
}

Generating a checking boolean-variable to be able to change the state of a value (TRUE or FALSE), this is what will help you to solve your issue.

Another note → NEVER USE MORE THAN → 1 ← onReady() in your whole code!
It is not neccessary and even bad to use more then → 1x-onready() ←

3

@russian-dima Hi, Thanks for your help and i managed to solve my all my challenges.

4

Hi, thanks for your solution! I’ve tried this and it works. But the “+” signs no longer appear after the numbers have done counting.

Is there a way to fix that?
Thanks :slight_smile:

5

Try if that works —>

function countCustomers(params) {
    let count = 0 //starting number
    const endTime = 1000 // ending number
    const interval = 1 // spped of the count in ms
    const counter = setInterval(() => {
        if(counter===endTime) {$w('#numcustomer').text = String(count)+"+";}
        else {
            $w('#numcustomer').text = String(count) // update text
            count === endTime && clearInterval(counter);
            count++;
        }
    }, interval)
}
6

Thanks for the reply!! However, it doesn’t work on my end :frowning: