Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Mar 19
Edited: Mar 19

How do I create text that fades in and out?

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. :)

2 answers3 replies

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

2
Mar 19Edited: Mar 19

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:

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); }


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.

Editor X

Design your boldest creations.