Changing text loop

Hello, I am trying to change the text content with infinite loop, using velo script, but it doesn’t work properly. Please, advice.

$w . onReady ( function () {
let myFade = {
“duration” : 1000 ,
“delay” : 1000
};
const myWords =[ “one” , “two” , “three” , “four” ];
while ( true ){
for ( const words in myWords ){
$w ( “#vartext” ). hide ( “fade” , myFade );
$w ( “#vartext” ). text = words ;
$w ( “#vartext” ). show ( “fade” , myFade );
}
}
});

Try this :slight_smile:

**let**  myFade  = { 

“duration” : 1000 ,
“delay” : 1000
};

const myWords =[ “one” , “two” , “three” , “four” ];
for ( let i = 0 ; i < myWords . length ; i ++) {

**await**  $w ( "#text10" ). hide ( "fade" ,  myFade ) 

$w ( "#text10" ). text  =  myWords [ i ]; 
**await**  $w ( "#text10" ). show ( "fade" , myFade )  
**if** ( i ===  3 ){ 
    i =- 1 
}

Thank you. I have updated the script accordingly:
$w . onReady ( async function () {
let myFade = {
“duration” : 1000 ,
“delay” : 1000
};
const myWords =[ “one” , “two” , “three” , “four” ];
for ( let i = 0 ; i < myWords . length ; i ++) {
await $w ( “#vartext” ). hide ( “fade” , myFade )
$w ( “#vartext” ). text = myWords [ i ];
await $w ( “#vartext” ). show ( “fade” , myFade )
if ( i === 3 ){
i =- 1
}
}
});

But, unfortunately, it still doesn’t work :frowning:

Mmm,
I tried it myself and it worked like a charm…
What does it do on your page?

I didn’t do it in the onReady function but i made a function and used a button to trigger the function

The problem with running in the onReady() , is that since it’s an endless loop, no other screen action can occur, so the screen is never displayed.

If you really need to run it in the onReady() , and therefore can’t user Kristof’s code, try the following code that uses an interval timer. This allows the screen to render, while at the same time displaying another word every second.

let interval;
let timeInterval = 1000;

$w.onReady(function () {
    let idx = 0;
    const myWords = ["one", "two", "three", "four"];
    interval = setInterval(function () {
        $w("#vartext").text = myWords[idx++];
        if (idx === myWords.length) idx = 0;
    }, timeInterval);
});

If you want to stop the endless loop sometime, you can clear the interval somewhere, for example in a button click, or after 50 times, or whatever. Just do this:

clearInterval(interval);

Hi @yisrael-wix
Thanks for helping out Mr. Brewmaster.

I changed your code a bit so it still has the fade options.

let interval;
let timeInterval = 4100;

let myFade = {
  "duration": 1000,
  "delay": 1000
};
$w.onReady(function () {
      let idx = 0;
    const myWords = ["one", "two", "three", "four"];
    interval = setInterval(async function () {
        $w("#text10").text = myWords[idx++];
        await $w("#text10").show("fade",myFade)
        .then()
        await $w("#text10").hide("fade",myFade)
        if (idx === myWords.length) idx = 0;
    }, timeInterval);
});

Hi, I’m trying to add a text animation where a new word populates and makes the last word disappear… any help?

@volkaertskristof Hi, I’m trying to add a text animation where a new word populates and makes the last word disappear… any help?

Hi alydelpalacio,
Go to the discord channel from wix and check the round table challenge, i posted there a text animation package (for the challenge)
Is that what you are trying to do?

@volkaertskristof not sure, I haven’t been in the discord ever lol just new trying to apply changes to my site… I want a ‘slider of words’ really… so each word appears and disappears to give the space for the next one… as a list…

Go check the discord, this way i know if thats what you are looking for or not :slight_smile:
Its a bit up the chat in the round table room, i posted a video there :slight_smile:

@volkaertskristof what’s the tittle you gave? I can’t see it in the round table…

Typewriter is the name :slight_smile:

@volkaertskristof I don’t think is the same… I believe you’re refering to typewriting…? at least it’s what I saw in the round table… and what I want it’s a simple display & hide of consecutive words… I have 12 words, and I want them to appear and disapear one by one in the middle of a sentence… don’t know if I’m explaining it correctly… so really a ‘word slider’ I guess…

I’m not really sure what exactly you mean by it :sweat_smile: with the typewriter you show each word/sentence of an array,
When the first 1 is done, it disapears and the next starts showing.
Do you have an example on a page you sa somewhere?
I’m off to bed now.

Oke, so i tought about it a bit and i think i ubderstand now.
So you have a sentence with 12 words, something like"hi i am Kristof. Whats your name?"
You want to first show “hi” then “i’am” then “kristof” etc… but it has to stay on the same place in the sentence?

Anything like any of these?
https://limelightmediaas.editorx.io/textanim

@simen the very first one! I just don’t want the box/button look… as I want trasparent background…

@volkaertskristof is the first example of the link that Simen posted