Wix Dynamic Pages: Coded Fade-in Effects Not Working After Navigating Item-to-Item

Ask the community
, , ,
1

Question:
[ I’m working on a Wix dynamic page where I use fade-in effects on certain elements (e.g., #statebox1) triggered by button clicks. The fade effects work perfectly when I refresh the page. However, when navigating between dynamic page items using navigation buttons (e.g., #button4 and #button5), the elements that should fade in do not show at all.

What I’ve Tried:

  1. I used the show("fade") and hide("fade") methods for the element.
  2. I attempted a workaround by simulating a page refresh using wixLocation.to(wixLocation.url), which resolved the fade-in issue but caused the navigation to remain on the same item instead of advancing.
  3. I delayed the initialization of the fade-in effect using setTimeout to ensure the page fully loads, but the issue persists.
  4. I confirmed that the elements are not hidden in the Wix Editor and are configured correctly.

Expected Behavior:

  • When I click a navigation button, the page should advance to the next dynamic item, and the specified elements (e.g., #statebox1) should appear with a fade-in effect on demand.

Actual Behavior:

  • After clicking the navigation buttons, the elements with the fade effect do not appear, even though the page advances to the next item.

Setup:

  • I’m using Wix’s show("fade") method for fade-in effects.
  • The issue occurs only after navigating between dynamic page items.

Code Snippet:
Here’s a simplified version of the relevant code:

// Additional onClick events for different elements
$w.onReady(() => {
$w(‘#Logo’).onClick(() => {
$w(‘#stateElementId’).changeState(“TechInfo”);
});

$w('#textdisrupt').onClick(() => {
    $w('#stateElementId').changeState("Disruption");
});

$w('#gear2').onClick(() => {
    $w('#stateElementId').changeState("Applications");
});

$w('#textapp').onClick(() => {
    $w('#stateElementId').changeState("Applications");
});


$w('#TechCreator').onClick(() => {
    $w('#stateElementId').changeState("Contact2");
});

$w('#textTechCreator').onClick(() => {
    $w('#stateElementId').changeState("Contact2");
});

    $w('#disruptionRocketButton').onClick(() => {
    $w('#statebox1').show("fade", { duration: 1500 });
    
    setTimeout(() => {
       $w('#statebox1').hide("fade", { duration: 1500 });
    }, 9000);

});

});

]

Product:
[Wix Editor]

What are you trying to achieve:
[The idea here with is to show element with fade-in effect, as showing and hiding abruptly is not ideal.]

What have you already tried:
[This is not my first issue at trying to combine item-navigation on dynamic pages with fade-in effects… The only solution I’ve found is to get rid of the fade-effects, then thinks work again without any trouble]

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

Please refer to original post