# How to make an animated number counter?

**URL:** <https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [October 6, 2020, 1:38am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060 "2020-10-06T01:38:09Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![igorgeoinformacao](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/igorgeoinformacao/32/23910_2.png) [@igorgeoinformacao](https://forum.wixstudio.com/u/igorgeoinformacao)\
**Post date:** [October 6, 2020, 1:38am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/1 "2020-10-06T01:38:09Z")

</div>

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:

```javascript
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

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [October 6, 2020, 6:36am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/2 "2020-10-06T06:36:03Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![igorgeoinformacao](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/igorgeoinformacao/32/23910_2.png) [@igorgeoinformacao](https://forum.wixstudio.com/u/igorgeoinformacao)\
**Post date:** [October 7, 2020, 9:46am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/3 "2020-10-07T09:46:02Z")

</div>

Excellent! Thank you!

---

<div class="post-metadata">

**Author:** ![emerdmanntu](https://avatars.discourse-cdn.com/v4/letter/e/d07c76/32.png) [@emerdmanntu](https://forum.wixstudio.com/u/emerdmanntu)\
**Post date:** [October 27, 2021, 8:21pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/4 "2021-10-27T20:21:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![info21816](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/info21816/32/12602_2.png) [@info21816](https://forum.wixstudio.com/u/info21816)\
**Post date:** [February 23, 2022, 7:55pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/5 "2022-02-23T19:55:21Z")

</div>

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

```javascript
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++;}

```

---

<div class="post-metadata">

**Author:** ![info21816](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/info21816/32/12602_2.png) [@info21816](https://forum.wixstudio.com/u/info21816)\
**Post date:** [February 23, 2022, 7:56pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/6 "2022-02-23T19:56:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![code-queen](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-queen/32/696_2.png) [@code-queen](https://forum.wixstudio.com/u/code-queen)\
**Post date:** [April 24, 2022, 1:28pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/7 "2022-04-24T13:28:50Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![shikha-goyal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/shikha-goyal/32/24850_2.png) [@shikha-goyal](https://forum.wixstudio.com/u/shikha-goyal)\
**Post date:** [April 29, 2022, 9:15am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/8 "2022-04-29T09:15:50Z")

</div>

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.?

---

<div class="post-metadata">

**Author:** ![jacehnsn](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jacehnsn/32/33773_2.png) [@jacehnsn](https://forum.wixstudio.com/u/jacehnsn)\
**Post date:** [June 17, 2022, 8:12pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/9 "2022-06-17T20:12:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jsmarttech4](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/jsmarttech4/32/24611_2.png) [@jsmarttech4](https://forum.wixstudio.com/u/jsmarttech4)\
**Post date:** [July 1, 2022, 8:06pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/10 "2022-07-01T20:06:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![soujithalder69](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/soujithalder69/32/9215_2.png) [@soujithalder69](https://forum.wixstudio.com/u/soujithalder69)\
**Post date:** [September 8, 2022, 12:38am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/11 "2022-09-08T00:38:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [September 8, 2022, 2:01pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/12 "2022-09-08T14:01:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![soujithalder69](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/soujithalder69/32/9215_2.png) [@soujithalder69](https://forum.wixstudio.com/u/soujithalder69)\
**Post date:** [September 8, 2022, 2:47pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/13 "2022-09-08T14:47:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![J.D](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/j.d/32/7312_2.png) [@J.D](https://forum.wixstudio.com/u/J.D)\
**Post date:** [September 8, 2022, 10:56pm UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/14 "2022-09-08T22:56:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rubik-angelo](https://avatars.discourse-cdn.com/v4/letter/r/a88e4f/32.png) [@rubik-angelo](https://forum.wixstudio.com/u/rubik-angelo)\
**Post date:** [February 4, 2023, 12:46am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/15 "2023-02-04T00:46:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![khursheedaalam62](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/khursheedaalam62/32/36932_2.png) [@khursheedaalam62](https://forum.wixstudio.com/u/khursheedaalam62)\
**Post date:** [March 27, 2023, 9:45am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/16 "2023-03-27T09:45:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![V-Blog](https://avatars.discourse-cdn.com/v4/letter/v/898d66/32.png) [@V-Blog](https://forum.wixstudio.com/u/V-Blog)\
**Post date:** [August 26, 2025, 3:02am UTC](https://forum.wixstudio.com/t/how-to-make-an-animated-number-counter/33060/17 "2025-08-26T03:02:13Z")

</div>

Here is a Tutorial Showing How to add a Number count-up animation with a prefix in Wix -

> **[How to Create Count Up Text Animation in Wix using Velo - With Code](https://www.utilitytools.online/post/how-to-create-count-up-text-animation-in-wix-using-velo-code)**
>
> In this article, you will learn how to create a count-up animation in #Wix\_Editor and #Wix\_Studio using Velo code. This method allows you to add an animating number count-up animation anywhere on your website.