Visibility Issue with Elements in Multistate Box During State Transitions

Ask the community
, ,
1

Problem Description: I am implementing a next-previous question transition using a Multistate Box in Wix for a survey or quiz-like application. My goal is to achieve smooth transitions between questions. However, I’ve encountered an issue: when transitioning from one state to another within the Multistate Box, it seems that the visibility settings of hidden elements are not respected. Specifically, elements that I have intentionally hidden in a given state briefly appear during the transition before settling into the desired state. I’m uncertain whether I’m missing a detail in my implementation or if this is an inherent behavior of the Multistate Box.

Affected Product: I’m using the Multistate Box component on Wix, specifically leveraging the hide/show functionalities with effects to manage transitions between states.

Objective: To create fluid transitions between questions in a survey or quiz while maintaining certain elements hidden during state changes.

Attempted Solutions:

  1. I’ve tried using setTimeout to delay the state change and allow the hide animation to complete before proceeding, but this did not resolve the issue.
  2. I utilized promises with .then() to sequence the actions of hiding the Multistate Box, changing its state, and then showing the Multistate Box again, hoping this would respect the visibility settings of elements in each state.
  3. I also attempted to manually hide specific elements after the state change as a workaround, but this is not ideal and disrupts the transition aesthetics.

Example Code: Here is a snippet of my code demonstrating how I’m handling the ‘next question’ transition, attempting to hide and show the Multistate Box and switch between its states:

javascriptCopy code

export function nextQ() {
    $w('#multiStateBox1').hide("float", foldHideOptions).then(() => {
        currentStateIndex += 1;
        $w('#multiStateBox1').changeState(multiStates[currentStateIndex].id).then(() => {
            // Attempt to manually hide specific elements after the state change
            // $w('#someBox').hide(); // Example of hiding a specific element
            $w('#progressBar1').value = currentStateIndex;
            $w('#previousBtn').enable();
            $w('#multiStateBox1').show("float", foldshowOptions);
        });
    });
}

Additional Information: I am looking for a solution that allows for smooth state transitions without momentarily revealing elements that should remain hidden. Any advice on how to better manage visibility transitions or ensure that the Multistate Box respects the visibility settings of elements during state changes would be greatly appreciated.

video of “bug”

2

Animations don’t currently work correctly with Multistate boxes.

One possible temporary workaround in your case would be to have an element that is a solid color the same as the background, place it over the multistate box, and hide/show that element to hide the parts where the multistatebox flickers.

1 Like
4

To streamline the troubleshooting process, I modified the code to toggle the visibility of a single state box rather than the entire multiStateBox, and yet, the “flicker bug” persisted. This leads me to believe that the issue arises during the execution of the state-change functions, as the box unexpectedly becomes visible despite explicit instructions to remain hidden. Here’s a refined version of the code snippet for clarity:

export function nextQuestion() {
    // Hide the current state with an animation before transitioning
    multiStates[currentStateIndex].hide("float", foldHideOptions).then(() => {
        // Advance to the next state
        currentStateIndex++;

        // Transition to the next state while keeping the multiStateBox hidden
        $w('#multiStateBox1').changeState(multiStates[currentStateIndex].id).then(() => {
            // Update the progress bar and enable the 'Previous' button in the meantime
            $w('#progressBar1').value = currentStateIndex; // Refresh the progress bar value
            $w('#previousBtn').enable(); // Activate the 'Previous' button

            // Reveal the multiStateBox with the new state now active
            multiStates[currentStateIndex].show("float", foldShowOptions);
        });
    });
}

This revised version enhances readability and maintains the logic of the original code, focusing on the transition between states within a multiStateBox and addressing the visibility issue encountered during state changes.

1 Like
5

Excellent! Glad you got it solved and thanks for sharing your solution!