In this article, you will learn how to create a count-up animation in #Wix_Editor and #Wix_Studio using Velo code. This method allows you to add an animating number count-up animation anywhere on your website. The code does not need any APIs like Wix animation. You can directly copy the code from below, paste it in your Wix websites, and change some parameters around to get the desired effect.

The Code

The following code is a template for creating a count-up animation in Wix. You can simply copy the code and paste it in your website’s code section.

Make sure that the developer mode is on in your Wix Editor in order to use the code. Please refer to the following article to learn more about how to enable developer mode in Wix.

$w.onReady(function () {
    const targets = [
        { id: 'text1', endValue: 10000, suffix: '+' },
        { id: 'text8', endValue: 20000, suffix: '+' },
        { id: 'text9', endValue: 100, suffix: '+' }
    ];
    const duration = 2000;

	targets.forEach(target => {
    $w(`#${target.id}`).text = "0" + target.suffix;
});

    function countUp(elementId, endValue, suffix, duration) {
        let startValue = 0;
        const increment = endValue / (duration / 16);
        let currentValue = startValue;

        const interval = setInterval(() => {
            currentValue += increment;
            if (currentValue >= endValue) {
                currentValue = endValue;
                clearInterval(interval);
            }
            $w(`#${elementId}`).text = Math.floor(currentValue).toLocaleString() + suffix;
        }, 16);
    }

    targets.forEach(target => {
        let hasAnimated = false;
        $w(`#${target.id}`).onViewportEnter(() => {
            if (!hasAnimated) {
                countUp(target.id, target.endValue, target.suffix, duration);
                hasAnimated = true;
            }
        });
    });
});

How to use the Code

Setting up the code is very easy in Wix. First, copy the code and paste it in your code section at the bottom of the page.

The code syntax

{ id: 'text1', endValue: 10000, suffix: '+' },
        { id: 'text8', endValue: 20000, suffix: '+' },
        { id: 'text9', endValue: 100, suffix: '+' }

controls the main parameters of the animation. In the code, “text1”, “text8”, and “text9” are the element IDs of the text in your website editor. Any text to which these IDs are assigned will show the animation.

text8 is the element ID of the text element.

The “endValue: 10000” and similar elements set the number in the counter. You can set the number you want to animate. On the other hand, the “suffix: ‘+'” is used to add an icon or static word at the end of the animated number, like “10000%” where 10000 will show animation and % will remain static.

You can do the same for other text elements as well. You can add as many numbers as you want in a similar way.

The syntax “const duration = 2000” decides the time taken to complete the animation. In the default code, it’s set to 2 seconds or 2000 milliseconds. You can change it to whatever value you want. For example, if you want the time taken to complete the animation to be 3.5 seconds, then change the value to 3500.

NOTES:

• Make sure your element IDs match the text elements.
• The text shown in the text element depends only on the number in the code. It will replace the actual text of the text element with the number in code.
• The code detects when the number enters the viewport(visible) area and then starts the animation.

Conclusion

Thanks for reading! I hope you found this article helpful. If you have any questions regarding how to add Count Up Text Animation in Wix or need specific features inside it, feel free to comment below. I will make sure to help, and if needed, modify the code specifically.

Make sure to check out our Wix Velo, SDK, and CSS code library that has a collection of cool effects, animations, and more.