top of page
Crumpled Fabric

1

Animated Number Counter

Click URL to copy

Mar 24, 2023

3 min read

WIX Ideas

Tags: JavaScript Animated Number


Wix is a well-known website builder that simplifies the process of making a beautiful website. Wix's ability to animate page components is only one of many impressive features. Here in Wix Ideas, we'll look at leveraging the user-supplied code to generate an animated number counter in Wix.


Statistics or any other numerical data can be presented in an interesting and dynamic manner with the help of an animated number counter. It's a straightforward method of making your website more engaging and attracting the attention of your target audience.

The user-provided code is written in JavaScript and runs on the Wix Corvid platform, a suite of tools that enables users to build unique features for their Wix websites. Let's go into the source code and figure out how everything fits together.


A function named countElement is called first in the code, and it accepts four parameters: element, startValue, endValue, prefix, and suffix. You can customize how a number is shown by passing in parameters for its prefix, suffix, startValue, and endValue, as well as the ID of the element to animate.


With the following lines of code, we establish two parameters: duration and increment. The increment constant determines how much the current value should be increased by at each iteration of the animation loop, while the duration constant determines the overall duration of the animation in milliseconds.