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.