How to make an animated number counter?

Ask the community
,
1

Hello guys, I wanted to add an animated number element to my website.
Where the Number will start count from 0 to 24,000.

I’ m using the following code for my Text Element:

let startNum = 0;
let endNum = 23978;
const duration =  10; // 1000 milliseconds 

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

function countUp(){ 
 if (startNum <= endNum ){   
        $w('#text112').text =  startNum.toLocaleString().toString();
        startNum++;
    }
}

The code works great for counting - but … counting from 0 to larger number 24,000 it takes a long time! I tried changing the duration, but apparently I don’t know exactly how to get it to count to in just a few seconds.

Thanks

2

Look, in the code you posted you set it to add +1 every 10 milliseconds which means it’ll complete counting from 0 to 24,000 within 240 seconds.
If you want it to be faster you can make the interval shorter (but not less than 4 ms) + instead of adding + 1 every time, you can add +100. For example:

function countUp(){ 
 if (startNum <= endNum ){   
        $w('#text112').text =  startNum.toLocaleString();
        startNum += 100;
    }
}
3

Excellent! Thank you!

4

Is it possible to add a second text box that also animates? I used the code and switched ‘#text1’ for ‘#text2’, and it will either not animate either or only allow one to animate.

5

someone had actually figured this out on a seperate thread.

Credit goes to David Rosenblatt,

To add several counters to a single page just add a numeric value like below

let startNum = 0;let endNum = 67;const duration =  110; 

$w.onReady(function () {setInterval(()=> {countUp();}, duration);});function countUp(){if (startNum <= endNum ){$w('#text106').text = startNum.toString();
		startNum++;}}let startNum1 = 0;let endNum1 = 36;const duration1 =  200; 

$w.onReady(function () {setInterval(()=> {countUp1();}, duration1);});function countUp1(){if (startNum1 <= endNum1 ){$w('#text109').text = startNum1.toString();
		startNum1++;}
6

Here’s the link as well: https://www.wix.com/velo/forum/coding-with-velo/how-to-create-animated-number

7

@info21816 Actually, it wasn’t David …it was Shan. Before that there are plenty of other coders to created this animated counter back in 2017 when wix code was just released. So will find a lot of old threads with the correct working code.

Just the same … that code listed above has too many onReady lines. There should only be 1 on the page. The code needs to be combined differently.

8

How to animate counter number when user will come able to particular slide on counter number then number will run | how to create like this.?

9

$w ( “#text67” ). onViewportEnter ( ( event ) => {
setInterval (() => {
countUp ();
}, duration );
}

10

thank you, i almost fell sick with the counter speed until i saw your post

11

im a no coder can anyone help me with this number counter code please
10+ 350+ 35000+ 3500+
any code for this please

12

Please post a new thread (this one is old) and explain what exactly you want to do.

13

I actually want a number counter ,in the previously typed manner, as i am a non coder so i needed it in a html code form which i can embed in the website

14

So do you need any further help or you’re ok with your embedded iframe?

15

No need to pay for an animated number counter. Use the simple method below to have animated counter text for FREE

Add a text box and in DEV MODE, paste the following text. Just make sure, <#text1> matched the ID of the text box you are trying to animate. The following code will run the text animation ONCE , when it enters in the the first time.

$w . onReady ( function () {
$w . onReady (()=>{
let viewcounting = 0 //initiate viewportenter count
$w ( ‘#text1’ ). onViewportEnter (()=>{
viewcounting = viewcounting + 1 //increment viewport count by 1 on entry
if ( viewcounting === 1 ) { //if statement to check if viewport entry count = 1
let count = 0 //starting number
const endTime = 12 // ending number
const interval = 100 // spped of the count in ms
const counter = setInterval (() => {
$w ( ‘#text1’ ). text = String ( count ) // update text
count === endTime && clearInterval ( counter )
count ++
}, interval )

} 
})

})

});

Hope this helps others as well.

16

Hi,
Code is great but I want to know how to add prefix postFix like 1000 +