Show boxB after hiding boxA

Ask the community
,
1

Hello. Very nooby here, so thanks in advance for the guidance.
I’m building this site: www.shawntraylor.com.

Homepage current behavior:

  1. Words (attached to boxWords) appear one after the other
  2. A slideshow appears
  3. “Hello.” (textHello) appears
  4. The words (boxWords) disappear

So far, this is exactly the desired behavior. However, once all of those steps have happened, I want a second set of words (attached to boxMenu) to fade in, all at the same time, in the exact spot where the previous words had been.

I thought I should be able to show boxMenu based on the event boxWords_viewportLeave(event). I’ve also tried collapsing boxWords instead of hiding. boxMenu is currently has default value: Colllapsed.

//Only shows small logo if on mobile

import wixWindow from 'wix-window';
if(wixWindow.formFactor === "Mobile"){
  $w('#logSmall').show();
}

//Menu replaces initial words

$w("#boxWords").show("fade")
.then( ( ) => {
     setTimeout( () => {
         $w("#boxWords").hide("fade");
     }, 8000);
});

export function boxWords_viewportLeave(event) {
 // This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
 // Add your code for this event here: 
$w('#boxMenu').show();
}
What am I doing wrong / not doing?

What am I missing?

Thank you!!!
Shawn