How do I create text that fades in and out?

Ask the community
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 );

}