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”.
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.
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!
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
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 }
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.
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.
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 ;
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.