Search

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

Updated: Sep 8

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.

  1. $w.onReady(()=>{

  2. $w('#text1').onViewportEnter(()=>{

  3. let count = 0 //starting number

  4. const endTime = 10000 // ending number

  5. const interval = 100 // spped of the count in ms

  6. const counter = setInterval(() => {

  7. $w('#text1').text = String(count) // update text

  8. count === endTime && clearInterval(counter)

  9. count++

  10. }, interval)

  11. })

  12. })

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.


  1. $w.onReady(()=>{

  2. $w('#text1').onViewportEnter(()=>{

  3. let count = 0 //starting number

  4. const endTime = 10000 // ending number

  5. const interval = 100 // spped of the count in ms

  6. const counter = setInterval(() => {

  7. $w('#text1').text = String(count) // update text

  8. count === endTime && clearInterval(counter)

  9. count++

  10. }, interval)

  11. })

  12. })

  13. $w.onReady(()=>{

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

  15. let count = 0 //starting number

  16. const endTime = 10000 // ending number

  17. const interval = 100 // speed of the count in ms

  18. const counter = setInterval(() => {

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

  20. count === endTime && clearInterval(counter)

  21. count++

  22. }, interval)

  23. })

  24. })




View more of our self help videos on YouTube below.



1,091 views4 comments

Recent Posts

See All