How can I make a element show up and hide and then another elemnt to fade in with an animation in it's place.

Ask the community
,
1

For example imagine a title saying:
The clothes for the perfect:
And the word after perfect keeps fading in and changing

2

use timeouts to set the pace of what you want to do. For the design aspect, have a text box (in this example titled text2) adjacent to the text box containing “The clothes for the perfect:”

Here’s an example of the code:

// Show/hide modifications:

let fadeOptions = {
  "duration":   500, //how fast it fades in
  "delay":      0, //how long after calling to hide or     show before the fade animation starts
};

//in your event trigger:

let t1 = "Daytime"
let t2 = "Nighttime"
let t3 = "Bedtime"

//this will cycle through the three words Daytime, Nighttime, Bedtime

var i;
var l = 10 // this is the number of times you want the words to cycle
for (i = 0; i < l; i++) { 
    $w('#text2').text = t1
    setTimeout(() => {
       $w('#text2').hide("fade", fadeOptions)
       $w('#text2').text = t2
       setTimeout(() => {
           $w('#text2').show("fade", fadeOptions)
               setTimeout(() => {
                   $w('#text2').hide("fade", fadeOptions)
                   $w('#text2').text = t3
               setTimeout(() => {
                   $w('#text2').show("fade", fadeOptions)
               setTimeout(() => {
                   $w('#text2').hide("fade", fadeOptions)
                   $w('#text2').text = t1
               setTimeout(() => {
                   $w('#text2').show("fade", fadeOptions)
               }, 700)
               }, 700)
               }, 700)
               }, 700)
       }, 700)
    }, 700) // how often you want them to change
}

This should cycle through them, but you may need to adjust the timing. Note that you need a timeout Delay that is higher than the fade duration. This is because if you don’t the element will not finish showing before you call it to hide or hiding before you call it to show. So it will break the code.

Hope this helps!