Help with number animation

Ask the community
,
1

Hey guys!

I’m having a hard time trying to animate some numbers. It has been tried before by other users here and idk why it doesn’t work for me. I don’t know about code, so I’m just reading what I find and applying it to my website. I hope somebody can help me… I’m writting down the following code for a text element:

export function text28_viewportEnter(event, $w) {
//Add your code for this event here:
let startNum = 0;
let endNum = 200;
const duration = 75;
$w.onReady(function () { setInterval(()=> { countUp(); }, duration);});
function countUp(){ if (startNum <= endNum ){
$w(‘#text28’).text = startNum.toString();
startNum++; }}
}

Nothing happens to the text when I do this, no animation. Later I read another forum post where it was recommended to remove the $w.onReady from the code so it was like this:

export function text28_viewportEnter(event, $w) {
//Add your code for this event here:
let startNum = 0;
let endNum = 200;
const duration = 75;
setInterval(()=> { countUp(); }, duration);});
function countUp(){ if (startNum <= endNum ){
$w(‘#text28’).text = startNum.toString();
startNum++; }}
}

But then I get the following errors: “StartNum is unread”, “Unexpected Token” (on a parenthesis) and “StartNum is undefined”.

Please, bear with me :slight_smile:

Thanks!

2

Hi Rodrigo,

You don’t say what your page looks like so I can only provide a simple example. To perform number animation on the text field that has the ID #text28, you can do something like this:

let startNum = 0;
let endNum = 200;
const duration = 1000; // 1000 milliseconds 

$w.onReady(function () {

});

function countUp(){ 
   if (startNum <= endNum ){
      $w('#text28').text = startNum.toString();
      startNum++;
   }
}

export function text28_viewportEnter(event, $w) {
   setInterval(()=> {
      countUp();  
   }, duration);
}

Please understand that if you are going to work with code extensively in the product and not just the features in the user interface, you will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one. The Wix Code Resources page provides tutorials, examples, and articles on getting the most out of Wix Code. We are happy to get you pointed in the right direction, but you’ll need to take it from there. As questions or difficulties arise, we are here to help.

You may also want to check out the WixArena - it’s a hub where you can look for Wix Code (and other) experts for hire.

Good luck,

Yisrael

3

Yisrael,

Thank you! It worked! However, I now edited the numbers and a message appears that says that I should debug the code in the Developer Tools, guess I’ll just google how to do that. The real question I want to ask you is how I can do the same animation (but with different numbers) to other text elements on the same page. I’m adding a screenshot so you can see how the website looks like. Again, thank you so much!

1280×611 67.7 KB

4

please add another version of the code as given below:

let startNum1 = 123
let endNum1 = 789
const duration1 = 100;

$w.onReady(function () {

});

function countUp1() {
if (startNum1 <= endNum1 ){
		$w('#text28').text = startNum1.toString(); //id of your text element
		startNum1++;
	}
}

export function text28_viewportEnter(event, $w) {
setInterval(()=> {
		countUp1(); 	
	}, duration1);
}
5

Rodrigo,

As @shan points out, just add additional code for each of the text boxes that you need.

As far as debugging, what message did you get?

Yisrael

6

Yisrael and Shan,

Actually the first text box is working perfectly, but when I copy/paste the same code for the next text element, it doesn’t do anything :confused:

Also, when I add the “});” at the end of the second code, as Shan pointed out in his last reply, it gives me an error on the ), that’s why I just put a }

Thank you so much guys, you are saving my life!

1280×322 22.6 KB

1279×675 61.9 KB

7

Sorry about the bug in my code.

Well I tried it out and it is working for me. Did you add an onviewportEnter event handler for #text26 ?? Just curious

8

Thanks Shaun. Do you mean what I uploaded in this screenshot? I actually had not do it, but then I added it and still the number doesn’t go up.

9

Its working for me: https://dudelemonweb.wixsite.com/holding-site/animated-number-test-ground

This is the code I used

let startNum = 2371292;
let endNum = 3000000;
const duration = 100;  

$w.onReady(function () {

});

function countUp(){ 
   if (startNum <= endNum ){
      $w('#text18').text = startNum.toString();
      startNum++;
   }
}


export function text18_viewportEnter(event, $w) {
   setInterval(()=> {
      countUp();  
   }, duration);
}

let startNum1 = 123;
let endNum1 = 789;
const duration1 = 100; 

$w.onReady(function () {

});

function countUp1(){ 
   if (startNum1 <= endNum1 ){
      $w('#text19').text = startNum1.toString();
      startNum1++;
   }
}

export function text19_viewportEnter(event, $w) {
	  setInterval(()=> {
      countUp1();  
   }, duration1);
}
10

Weird… Now I copied your code exactly and the same thing happens. The first animation works but the second nothing happens…

11

Tried with another text element and it does work… Somehow the text26 doesn’t want to move

12

Just deleted it and replaced it with a new text element. Now everything works. Thanks a million!

13

Hi Yisreal

I have a similar situation and I am trying to add a suffix to the animated number, so it will be 0 to 100+, how do I do that, can you help me?

14

I’d like to follow on relevant questions. I try to do the animation for number with decimal, but it fails, any suggestion? Here’s my code, for integer numbers it works out well, but for the one with decimal, the decimal part didn’t get count.

2424×294 12.8 KB

let startNum6 = 100.0 ;
let endNum6 = 500.0 ;
const duration6 = 900 ;

$w . onReady ( function () {
setInterval (() => {
countUp6 ();
}, duration6 );
});

function countUp6 () {
if ( startNum6 <= endNum6 ) {
$w ( ‘#text387’ ). text = startNum6 . toFixed ( 1 );
startNum6 ++;
}
}

Anyone knows how to get like 132.1, 132.2,…132.9, 133.0? Right now it will show 132.0, 133.0, 134.0…

15

Just count using whole numbers and then divide the total by 10.

let num = 1321;
num++;
let decimalString = num/10;
console.log(decimalString); // displays "132.2"
16

hey Alison

I have a widget i made that we [use](use

http://wix.to/U0A8CBU

This)

[http://wix.to/U0A8CBU](use

http://wix.to/U0A8CBU

This)

[This](use

http://wix.to/U0A8CBU

This) will work. just add it to the site, add it to a page click settings, adjust the settings then off you go. Just so you know its not officially supported as one of our apps so therefore has no support at the moment but will work.

17

Hi Yisrael thanks for the help! I also try Scott’s app but it still can only addup integer numbers but using your app will be quite easier for beginners. The below is my adjustment :

let startNum6 = 3500 ;
let endNum6 = 5000 ;
const duration6 = 1000 ;

$w . onReady ( function () {
setInterval (() => {
countUp6 ();
}, duration6 );
});

function countUp6 () {
if ( startNum6 <= endNum6 ) {
startNum6 ++;
let decimalString = startNum6++/ 10 ;
$w ( ‘#text387’ ). text = decimalString . toString ();
}

18

I think you need to consult an authentic Video Animation Services provider for proper assistance because if it is any drawback related to your artwork project it will be resolved by an expert artist.