# How to create animated number

**URL:** <https://forum.wixstudio.com/t/how-to-create-animated-number/19749>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [January 19, 2018, 4:24am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749 "2018-01-19T04:24:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mamamiya407](https://avatars.discourse-cdn.com/v4/letter/m/a698b9/32.png) [@mamamiya407](https://forum.wixstudio.com/u/mamamiya407)\
**Post date:** [January 19, 2018, 4:24am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/1 "2018-01-19T04:24:59Z")

</div>

Hi guys,

I’d like to know how to create animated number?  
The animated number will work while visitor scroll to the section.

I found some js on internet, however I don’t know how to modify it?  
Thank you in advance!

For example:

HTML:

```javascript
<span class="count">853</span>

```

JS:

```javascript
$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 8000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});

```

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [January 21, 2018, 10:10am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/2 "2018-01-21T10:10:54Z")

</div>

Hey,  
Do you have an example of what you would like to achieve so that I can better understand what you were referring?

Thanks,  
Tal.

---

<div class="post-metadata">

**Author:** ![lolzkellybennett](https://avatars.discourse-cdn.com/v4/letter/l/e9bcb4/32.png) [@lolzkellybennett](https://forum.wixstudio.com/u/lolzkellybennett)\
**Post date:** [March 3, 2018, 5:45pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/3 "2018-03-03T17:45:31Z")

</div>

I have also been looking for the same! I want a set of numbers to count quickly upwards from 0 to a target number when the user scrolls to this section of the site. Eg: Coffees consumed: 102, Emplyees hired: 12, number of clients: 327 etc etc

---

<div class="post-metadata">

**Author:** ![steven-1](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@steven-1](https://forum.wixstudio.com/u/steven-1)\
**Post date:** [March 3, 2018, 8:41pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/4 "2018-03-03T20:41:27Z")

</div>

oh this would be cool

---

<div class="post-metadata">

**Author:** ![\_info-42](https://avatars.discourse-cdn.com/v4/letter/_/cc9497/32.png) [@\_info-42](https://forum.wixstudio.com/u/_info-42)\
**Post date:** [March 15, 2018, 4:31am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/5 "2018-03-15T04:31:58Z")

</div>

Requested the same feature from wix. This is available on SquareSpace, Weebly, Wordpress et al plus there and lots of code on Github etc that can be easily customized. eg. [CountUp.js](https://inorganik.github.io/countUp.js/). The irony is that Wix has this feature in the dashboard analytics.

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [March 15, 2018, 1:44pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/6 "2018-03-15T13:44:51Z")

</div>

Hi,  
You can add a text element to the editor and add the following code:

```javascript
let startNum = 0;
let endNum = 500;
const duration = 1000; // 1000 milliseconds 

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

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

```

Good luck,  
Tal.

---

<div class="post-metadata">

**Author:** ![\_info-42](https://avatars.discourse-cdn.com/v4/letter/_/cc9497/32.png) [@\_info-42](https://forum.wixstudio.com/u/_info-42)\
**Post date:** [March 16, 2018, 5:28pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/7 "2018-03-16T17:28:16Z")

</div>

Thx Tal…I played around a bit and got something working using the following code. I just need to find a way to add a comma separator in the numbers and the currency (either USD or $). The desired effect is for the final display should read $450,000 or USD 450,000.

100
 body { font-family:Helvetica; font-size:40px; color:#fcdb17; 

}

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [March 18, 2018, 10:39am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/8 "2018-03-18T10:39:10Z")

</div>

Hey,

I’ve improved the code above and added commas to the relevant locations:

```javascript
let startNum = 1000;
let endNum = 1500;
const duration = 1000; // 1000 milliseconds 

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

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

```

Best,  
Tal.

---

<div class="post-metadata">

**Author:** ![\_info-42](https://avatars.discourse-cdn.com/v4/letter/_/cc9497/32.png) [@\_info-42](https://forum.wixstudio.com/u/_info-42)\
**Post date:** [March 18, 2018, 3:27pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/9 "2018-03-18T15:27:45Z")

</div>

Thanks Tal. I tried the improved code and it is just returning a value of ‘100’. What I am trying to accomplish is an animated count-up to $450,000 inclusive of the comma separator and the currency (either USD or $). The desired effect is for the final display to read $450,000 or USD 450,000. I had a Wordpress plugin for this feature before I migrated to Wix and it is quite common on other websites. I have six websites that I am currently hosting with Wix and this feature is something that I would like to use more often to display numbers. Thanks.

---

<div class="post-metadata">

**Author:** ![Shan](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/shan/32/106059_2.png) [@Shan](https://forum.wixstudio.com/u/Shan)\
**Post date:** [March 25, 2018, 3:38pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/10 "2018-03-25T15:38:37Z")

</div>

Hi,

Is it possible to make the numbers start their count when on view port enter ?

---

<div class="post-metadata">

**Author:** ![ingcarlostello](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ingcarlostello/32/949_2.png) [@ingcarlostello](https://forum.wixstudio.com/u/ingcarlostello)\
**Post date:** [May 8, 2018, 4:41am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/11 "2018-05-08T04:41:37Z")

</div>

## Look guys I did it to this way

## 

## [https://youtu.be/7ddghKQHgyw](https://youtu.be/7ddghKQHgyw)

## 

## you can download de code from mi page

---

<div class="post-metadata">

**Author:** ![david-rosenblatt](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/david-rosenblatt/32/697_2.png) [@david-rosenblatt](https://forum.wixstudio.com/u/david-rosenblatt)\
**Post date:** [May 14, 2018, 12:43am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/12 "2018-05-14T00:43:22Z")

</div>

Thank you! Tal. Thank you! I have been looking for this code for a while now. Finally!.  
now how do I add several counters to a single page?

---

<div class="post-metadata">

**Author:** ![Shan](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/shan/32/106059_2.png) [@Shan](https://forum.wixstudio.com/u/Shan)\
**Post date:** [May 14, 2018, 6:50pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/13 "2018-05-14T18:50:33Z")

</div>

Hi 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++;
	}
}

```

Best of Luck,

Shan

---

<div class="post-metadata">

**Author:** ![fullonaksh](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fullonaksh](https://forum.wixstudio.com/u/fullonaksh)\
**Post date:** [May 17, 2018, 11:43am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/14 "2018-05-17T11:43:41Z")

</div>

Thx for this got it working on my site. After the counter has finished playing is it possible to replay animation on a continual loop after a delay of 3 seconds?

---

<div class="post-metadata">

**Author:** ![dor-izraeli](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dor-izraeli/32/1304_2.png) [@dor-izraeli](https://forum.wixstudio.com/u/dor-izraeli)\
**Post date:** [May 29, 2018, 9:23am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/15 "2018-05-29T09:23:28Z")

</div>

hello, how can i fix the comma for the number ‘14,360,000’ in this example to show correctly?:

**let** startNum = 14359888;  
**let** endNum = 14360000;  
**const** duration = 7; // 1000 milliseconds

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

**function** countUp(){  
**if** (startNum \<= endNum ){  
$w(‘#text4’).text = addCommasToStringOfNumber(startNum.toString());  
startNum++;  
}  
}

**function** addCommasToStringOfNumber(numString){  
**let** newNumString = numString.split(“”).reverse();

**for** ( **let** i = 0; i \< numString.length; i++){  
**if** (i % 3 === 0 && i !== 0 ){  
newNumString.splice( i, 0 , “,”);  
}  
}

```
newNumString = newNumString.reverse().join(""); 

```

**return** newNumString;  
}

thanks guys

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [May 29, 2018, 9:32am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/16 "2018-05-29T09:32:25Z")

</div>

How does it display it now? Basically, the if statement should take care of this scenario (the **modulo** operation).

---

<div class="post-metadata">

**Author:** ![dor-izraeli](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/dor-izraeli/32/1304_2.png) [@dor-izraeli](https://forum.wixstudio.com/u/dor-izraeli)\
**Post date:** [May 29, 2018, 9:55am UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/17 "2018-05-29T09:55:06Z")

</div>

hello tal thanks for your respond the number display like this:  
143,60,000  
send link:  
[https://www.boostforward.biz/grant](https://www.boostforward.biz/grant)

and the way that the number run isn’t Classic and smooth.

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [May 29, 2018, 12:54pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/18 "2018-05-29T12:54:01Z")

</div>

Hi Dor,  
I’ve fixed my code above. I used the [toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) function instead which solved the issue. I’ve made the changes in bold so that you can see the difference. Note that you can change the duration variable to a higher number to have a smoother view of the counter.

Best,  
Tal.

---

<div class="post-metadata">

**Author:** ![silverandstars](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/silverandstars/32/3092_2.png) [@silverandstars](https://forum.wixstudio.com/u/silverandstars)\
**Post date:** [May 29, 2018, 1:09pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/19 "2018-05-29T13:09:58Z")

</div>

Hi Everyone,

when I read the articles above, this is something i was looking for, but let me be more specific:

Let’s assume, I use two different database collections:  
EMPLOYEES : 725 items  
FACTORIES: 45 items

how would the code look like in this case?

Thanks

---

<div class="post-metadata">

**Author:** ![\_tal](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/_tal/32/669_2.png) [@\_tal](https://forum.wixstudio.com/u/_tal)\
**Post date:** [May 29, 2018, 1:38pm UTC](https://forum.wixstudio.com/t/how-to-create-animated-number/19749/20 "2018-05-29T13:38:01Z")

</div>

Hi Vladimir,  
I’m not sure that I understand what you were referring. Is it the same use-case like the current post? Can you please clarify?

Thanks

[Next page](https://forum.wixstudio.com/t/how-to-create-animated-number/19749.md?page=2)