top of page
  • Writer's pictureDallas Texas Web Design Co.

How to add an animated number counter to your Wix website.

Updated: Feb 21, 2023

Animated number counters are a great way to display statistics on a website. A primary trust indicator on your web design should include some sort of visible results your business provides, achieved, or can help others in doing the same. This animated number counter is a great way to accomplish just that.

Below you will find a video to help you add the animated number counter to your Wix website as well as the code that you will need to copy & paste within your editor to bring it all together. Be sure to turn on DEV Mode and get busy!

Help visitors feel more secure in doing business with you by incorporating trust indicators throughout your website.

Let's put it together.

Navigate to the top of your Wix Editor and select Dev Mode> Turn on Dev Mode. Once Dev Mode is turned on, your code panel will appear at the bottom of the editor.


Go ahead and add a text element to the page you would like your animated counter to be displayed. You can format this text element to any design you'd like; the code snippet below will not affect your text design.


On the same page you added the text element to, go ahead and copy & paste the code snippet below into your code panel.

$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 = 100 // ending number

const interval = 10 // speed of the count in ms

const counter = setInterval(() => {

$w('#text1').text = String(count) // update text ID to match text element

count === endTime && clearInterval(counter)

count++

}, interval)

}

})

})

});


$w.onReady(function () {

$w.onReady(()=>{

let viewcounting1 = 0 //initiate viewportenter count

$w('#text2').onViewportEnter(()=>{

viewcounting1 = viewcounting1+1 //increment viewport count by 1 on entry


if (viewcounting1 === 1) { //if statement to check if viewport entry count = 1

let count = 0 //starting number

const endTime1 = 300 // ending number

const interval = 10 // spped of the count in ms

const counter = setInterval(() => {

$w('#text2').text = String(count) // update text ID to match text eleme

count === endTime1 && clearInterval(counter)

count++

}, interval)

}

})

})

});


The text1 and text2 element IDs above should match the element ID shown in your editor.


The const endTime; will function as the end number you need the counter to stop at. Set = to the number you would like the counter to stop at.


The const interval; will function as the speed in which you'd like the counter to move at. Start at 10 and work your way up to a maximum of 1000 milliseconds to find which looks best. My thoughts? I recommend you stay around 75-100 milliseconds. Once done, go ahead and click Save then Preview to review your changes prior to Publishing your website. Need additional help? Click below to view our #youtube video showing you how to make this all come together.


Looking to add a second animated number?

Just be sure to duplicate the code and change values. Check the method below. In the duplicated instance for my second number I changed it to end at 60 for example. Happy coding.


As of 02/21/2023 - the below YouTube video does not reflect the new code however, the video should be able to assist in walking through the steps to implement.




View more of our self help videos on YouTube below.



6,342 views9 comments

Recent Posts

See All

9 Comments


Guest
Jun 02, 2023

thank you for your code, it was very helpful, but i want to change speed of the one number, can i?


Like

Guest
May 02, 2023

It's very useful How do I display a comma every 3 digits?

Like

Guest
Feb 03, 2023

This is helpful. There is one problem though, the number count runs every time view port is entered. Can you please make it so it runs ONCE when the view port is entered the first time and doesn't run again if you scroll down and enter view port again?

Like
Guest
Feb 03, 2023
Replying to

*Update*

Anyway, after putting a little thought into it, I came up with a counting loop to count the ViewportEnter event and running the animation if that count is 1 and not run it if it is more than 1. Happy to say, it has it worked.


$w.onReady(()=>{ let viewcounting = 0 //initiate ViewportEnter count $w('#text1').onViewportEnter(()=>{ viewcounting = viewcounting+1 //increment ViewportEnter count by 1 on entry if (viewcounting === 1) { //if statement to check if ViewportEnter 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) //…


Like

Unknown member
Jun 03, 2022

i've tried this code and it works but it only works in previeuw mode why?

Like

Guest
Mar 14, 2022

Hello, thank you so much for the video, it helped me.I have a question. How can I display a number with a plus sign using coding?

Eg. Number of clients: 60+


Thank you.


Lukas

Like
Guest
Aug 22, 2023
Replying to

$w.onReady(function () {

$w.onReady(()=>{

let viewcounting = 0 //initiate viewportenter count

$w('#text52').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 = 50 // ending number

const interval = 50 // speed of the count in ms

const counter = setInterval(() => {

$w('#text52').text = String(count) + '+' // update text ID to match text element

// if (count === endTime){

// $w('#text46').text = String(count) + '+'

// }

count === endTime && clearInterval(counter)

count += 1

}, interval)

}

})

})

});

Like
bottom of page