How do I create text that fades in and out?

Ask the community
1

In a line of text, I’d like there to be a blank section of the text where a list of text fades in and out (or some other kind of effect).

For example, “I am a (blank).” I’d have a list of words that would fade in and out: man, woman, child, etc.

Thanks in advance for any help on this, I’m brand new to design and Editor X and am loving it so far. :slight_smile:

2

Hi,
This can be achieved using Velo code, so only use if your’e familiar and confident enough in your coding chops.

this is the result: https://idoh33.editorx.io/mysite-108

Use 2 separate text elements:

1686×644 25.3 KB

And this is the code that I used:

$w.onReady( function () {

changingTitle();

});

function changingTitle() {
//This is an array of the words to be used
let words = [ ‘WOMAN’ , ‘BOY’ , ‘GIRL’ , ‘NONE OF THE ABOVE’,‘MAN’ ];
//set an incrementor to cycle through the array
let incrementor = 0 ;

//set an interval to run the code every 2 seconds
//#text3 is the id of the text element we want to change
//this code hides the text with a fade → changes the text while its not visible ----> fades the text back to visibility
//each time the code rums the incrementor is incremented until we reach the length of the words array then we restet it to 0 and the
//cycle starts again.

setInterval(() => { 
    $w( '#text3' ).hide( 'fade' , { duration:  500  }).then(() => { 
        $w( '#text3' ).text = words[incrementor]; 
        $w( '#text3' ).show( 'fade' , { duration:  500  }); 
        incrementor = (incrementor === words.length -  1 ) ?  0  : incrementor +  1 ; 
        console.log(incrementor); 
    }); 

},  2000 );

}

3

Hi Ido, that is exactly what I’m looking for!!! And I’m a complete newb to design and coding and have no idea what Velo code is. I will look into this, and if you or anyone else has any suggestions for how to learn Velo code with Editor X I’d greatly appreciate it. Thank you.

4

[https://www.wix.com/velo](https://www.wix.com/velo

It’s)

[It’s](https://www.wix.com/velo

It’s) a a way for you to add code to your Editor X/Wix Sites.

5

Sweet, Ido, thanks again for all of your help.

6

@donloristo Glad to help, Good Luck!!