How to create animated number

Discussion Ask a question
,
1

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:

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

JS:

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

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.

3

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

2 Likes
4

oh this would be cool

5

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. The irony is that Wix has this feature in the dashboard analytics.

6

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

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.

2 Likes
7

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;

}

1 Like
8

Hey,

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

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.

2 Likes
9

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.

10

Hi,

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

11

Look guys I did it to this way

- YouTube

you can download de code from mi page

12

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?

13

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

Best of Luck,

Shan

14

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?

15

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

16

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

17

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

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

18

Hi Dor,
I’ve fixed my code above. I used the 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.

1 Like
19

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

20

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

1 Like