top of page

How To Add Number Count Up Animation In Wix Websites(Studio, EditorX, Classic Editor)




$w.onReady(function () {
    const targets = [
        { id: 'text18', endValue: 2021, suffix: '' },
        { id: 'text21', endValue: 50, suffix: 'K+' },
        { id: 'text23', endValue: 2000, suffix: '+' },
        { id: 'text25', endValue: 99.9, suffix: '%' }
    ];
    const duration = 2000;

    targets.forEach(target => {
        $w(`#${target.id}`).text = "0" + target.suffix;
    });

    function countUp(elementId, endValue, suffix, duration) {
        let startValue = 0;
        const increment = endValue / (duration / 16);
        let currentValue = startValue;

        const interval = setInterval(() => {
            currentValue += increment;
            if (currentValue >= endValue) {
                currentValue = endValue;
                clearInterval(interval);
            }
            if (Number.isInteger(endValue)) {
                $w(`#${elementId}`).text = Math.floor(currentValue).toLocaleString() + suffix;
            } else {
                $w(`#${elementId}`).text = currentValue.toFixed(1) + suffix;
            }
        }, 16);
    }

    targets.forEach(target => {
        let hasAnimated = false;
        $w(`#${target.id}`).onViewportEnter(() => {
            if (!hasAnimated) {
                countUp(target.id, target.endValue, target.suffix, duration);
                hasAnimated = true;
            }
        });
    });
});

 
 
 

Recent Posts

See All
Wix Studio Hover Text Animation[Code]

<div class="wrapper">   <div class="hero">     <h1 class="hero__heading">Travel Guide</h1>   </div>   <div class="hero hero--secondary" aria-hidden="true" data-hero>     <p class="hero__heading

 
 
 

Comments


bottom of page