Animated Statistic Number Counter in Wix Studio

Learn to easily create a number counter in Wix Studio with just a bit of Velo code. Original code was made by Wix Ideas.

https://youtu.be/h0qT1Vfzr-Y

Now that you have seen how to build the section, feel free to copy/paste the code below:

 $w.onReady(function () {

      //COUNT FUNCTION
         function countElement(element, startValue, endValue, prefix = "", suffix = "") {
            
             const duration = 2000;
             const increment = (endValue - startValue) / (duration / 20);
             let currentValue = startValue;
     
             const timer = setInterval(() => {
                 currentValue += increment;
                 $w(element).text = prefix + `${(Math.round(currentValue)).toLocaleString('en-US')}${suffix}`;
     
                 if (currentValue >= endValue) {
                     clearInterval(timer);
                 }
             }, 20);
         }
     
     //COUNT TEXT ANIMATION 
         $w("#Counters").onViewportEnter(async () => {
            //LIST ALL NUMBER TO COUNT
             await countElement("#count1", 0, 98, "", "%");
             await countElement("#count2", 0, 5, "$", "B");
             await countElement("#count3", 0, 20, "", "%+");
         });
     }); 

Make sure to replace all the element IDs to match the code or change the code to match your IDs.

If you would like to download the section, feel free to check out our section product!

Have Fun!