How to create animated number


Tal, lets see this example:

I would like to create landing page informing any visitor of the webpage, how many EMPLOYEES (the endNum - which is dynamic, will be automatically counted up by the wix-code) and how many FACTORIES (here too, the endNum - which is dynamic, will be automatically counted up by the wix-code), the company manages.

So i would like write the Code, which makes it automatically for me using given parameters.

Thank you very much, Tal, for your assistance and effort.

hey tal thanks alot you helped me a lot

This was very helpful.

However, the count up animation starts as soon as the page is loaded, and my text element has been placed in the center of the webpage, so by the time I scroll there, the count is already over.

I’ve tried creating an onViewportEnter event from properties panel and then inserting the count up code below it, so that the animation only begins when the element enters the viewport. But this doesn’t work.

Does anyone have an example code for this?

Thanks so much!

Hi Tal,

have you looked at this solution?

What is “this” solution? I have the same need now… to have the counters start on viewPortEnter.

Hey guys, How would I install this js code into wix?

The code works great for counting - but I do have a question when trying to count to larger numbers (80,000,000) from zero. It takes FOREVER! I tried changing the duration, but apparently I don’t know exactly how to get it to count to 80 million in just a few seconds (5).

ANY HELP PLEASE?

Hi, this is working great, i just can’t get the number to change to whatever i want it to be, can you help me? thanks

Thank you Shan. works perfect!

Hi Tal - For some reason I just can’t get the placement of the comma (thousands separator) and adding the USD (currency prefix to work properly. Here’s the script that I am using which runs fast and displays the start and end numbers correctly.

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

Can you help with the exact placement and code for comma and the currency?

Thanks

Hello,

How to modify this code, so it would count down the numbers?

hello ing.
congratulations for your guide!! you are the best! i have two question for you.
For your opinion, exist one way, whit your code, to see same application from the mobile?
I have follow your guide, but is possible to erase the “comma”(o point) from the application?
thank you so much.
good woork.

hello ing.
congratulations for your guide!! you are the best! i have two question for you.
For your opinion, exist one way, whit your code, to see same application from the mobile?
I have follow your guide, but is possible to erase the “comma”(o point) from the application?
thank you so much.
good woork.

Hi folks I found a super simple way, without coding, to do this. I created a GIF in photoshop with the countdown numbers I wanted. I used a transparent background. In wix you can upload the GIF like any other image, and when you place that GIF image it works. Super simple and no coding needed.

Total novice here, but when I tried Shan’s suggestion for how to get the counter to work for two elements, it fails.
This works for one text box:

});
let startNum = 0;
let endNum = 70;
const duration =  50; // 1000 milliseconds
$w.onReady(function () {
setInterval(()=> {
countUp();
}, duration);
});
function countUp(){
if (startNum <= endNum ){
$w('#text150').text =  startNum.toLocaleString().toString();
startNum++;
}
}

But this doesn’t work for either:

});
let startNum = 0;
let endNum = 70;
const duration =  50; // 1000 milliseconds
$w.onReady(function () {
setInterval(()=> {
countUp();
}, duration);
});
function countUp(){
if (startNum <= endNum ){
$w('#text150').text =  startNum.toLocaleString().toString();
startNum++;
}
}
let startNum1 = 0;
let endNum1 = 70;
const duration1 =  50; // 1000 milliseconds
$w.onReady(function () {
setInterval(()=> {
countUp1();
}, duration1);
});
function countUp1(){
if (startNum1 <= endNum1 ){
$w('#text154').text =  startNum1.toLocaleString().toString();
startNum1++;
}
}

Any ideas? Thanks!