I’m trying to slowly fade in an overlay on a fixed div that covers the whole screen. At first, it’s hidden, so the interaction unhides it and supposed to slowly fade it in. But on first click, the div suddenly appears and the opacity animation doesn’t kick in. Only if you try a second time it works.
The user clicks on the “i” button on the lower left corner of the screen.
I recorded a video of what I’m talking about:
When I click the first time the overlay just pops up. If you click a second time, it fades out (This is what I intend it to do). If you click a third time (to open the overlay again), it fades in normally as it should’ve done the first time.
If you refresh the page, you can re-create this problem. So it’s only when the page is loaded.
My solution to fix this in Webflow would be to eliminate the interaction you have on the info overlay div. Right now you’re giving the user two ways to close it. Therein lies the conflict. I would only give them ONE way to close it. I would add another little interaction on the button that makes the “i” switch out to an “X” to signify the button will now close the overlay. I’m doing something similar on this flyout menu: http://bluestone.webflow.io/
For the viewer, this makes the “close” action more precise but I think that’s also a benefit because right now a viewer might accidentally click on your overlay div, not intending to close it. Your button currently brings up the pointer finger cursor indicating something clickable vs. the regular cursor when hovering the overlay.