Tutorial -How To Add A Count Up Number Animation In Wix using Velo

Show and tell
, ,
1

Hi Family,

Hope everyone is doing great,

I have created a tutorial explaining how to add a count-up animation effect in Wix using Velo. This method is good for SEO(unlike HTML embed, which is not so good for SEO; it is part of the DOM). You can use the native text elements and create responsive designs. Plus is loads fast. The code is included as well.

Hope you find it helpful.

Best Regards

3 Likes
2

Nice. I must try out this method.

The one I use is a little different

function countElement(sel, start, end, prefix = '', suffix = '') {
  const duration = 2000;
  const steps    = duration / 20;
  const inc      = (end - start) / steps;
  let   val      = start;

  const timer = setInterval(() => {
    val += inc;
    $w(sel).text = `${prefix}${Math.round(val).toLocaleString('en-US')}${suffix}`;
    if (val >= end) clearInterval(timer);
  }, 20);
}

$w.onReady(async () => {

  $w('#counterSection').onViewportEnter(() => {
    countElement('#text1', 0, 100, '', '+');
    countElement('#text2', 0,  98, '', '%');
    countElement('#text3', 0, 50, '$', 'M+');
    countElement('#text4', 0, 200, '', '+');
  });
1 Like
3

Loving the tutorial @V-Blog! :raising_hands: Awesome seeing you share your expertise with the community :star_struck:

It’s always interesting seeing the different approaches to the same problem and how there’s almost always more than one solution

1 Like
4

Wow, your version is more granular and starts the animation at the same time. It will be efficient when the numbers are stacked together! I started learning code a few months back, and this kind of knowledge is great to collect!

Also, may I share this code in the article as well, with proper credit, of course?

Best Regards

2 Likes
5

Thanks. I cant even remember how I got to that stage with the code. I do recall seeing parts of it somewhere and then just adjusted it to suit my requirements.

1 Like