Container Visibility Issue

I have an issue where I have a container set to hidden until a user taps on a container. Once they tap on it it should appear.

  1. App Variable set to false which controls visibility

  2. On Page Create I set the App Variable to false

  3. On tap I set the App Variable to True and have animation to fade it in

  4. Once visible, there is an X the user taps to close the container

  5. On Tap of the X I set the App Variable to False and have animation to fade it out

  6. I can get the container to show if i tap once

  7. When I tap the X the container fades away as expected

  8. If I tap on another line, the container appears briefly then disappears and I can no longer tap on the lines.

The tappable lines are part of a repeat and are designed to show events, when the user taps on the event name then the pop-up gives them more details. When I look at the debugger the Flow shows that my App Variable is set to false twice.

I have tried to remove the Set App Variable in the Page Create Event but the same issue happens.

I’m sure it’s something simple, I am just at a loss and haven’t been able to find an appropriate fix.



What seems to be happening here is that the animation of the component stays as “fadeOut” after it’s hidden and that won’t change when making it visible again. The solution is to pre-set the animation of the component before it’s set to visible. That sounds a little confusing - I’ll show I made it work out, hopefully this works out for you as well.

First, on page mount, hide the component (I’m using a card) and pre-set its animation to “fadeIn” or whatever you want to animate when the component first appears.

Set up your repeated container that controls the visibility to do nothing else than control the visibility

Finally, with the X button, first set the fade out, then delay to make sure the full animation plays before hiding the component, and lastly, pre-set the animation to “fadeIn” again.

1 Like

Thanks! I will try this out and mark as solution once I confirm.