Overlay suddenly appears on first click

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.

Any ideas on how to fix it?


Here is my site Read-Only: LINK

Did you get this issue resolved?

Hi, no unfortunately I did not.

Need to include a link to your site and specify which page and which element.

Edited the link in the main post, thanks for the warning.

cool site!

So I’m looking at the working page but I don’t see this overlaying div you’re talking about. Not seeing any hidden fix div. Can you give a little more detail?

Are you wanting an interaction to happen when the page loads? If it’s a click interaction, what element on the page does the viewer click on to see this fade happen?

Thanks!

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.

Ah ha, now I see what you’re saying. And I’ve run into this problem before and had to us javascript to fix it. Essentially the javascript has to be used to reset the entire interaction steps back to their original state. I don’t recommend going this route.

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.

Hope this helps! If you want to go the javascript route I can try to explain that process a little more.

For me, this is fixed when you separate the Opacity from the previous Hide/Show (initial state) action so the Opacity action has ‘After Previous Action’, NOT ‘with Previous Action’ as it’s Start.

Like this:

0.00 — Hide/Show (initial state)

0.00 — Opacity: 0% (Start: After Previous Action), Easing (Linear(None), Duration (0.01s)

0.50 — Hide/Show (Start: After Previous Action)

0.50 — Opacity: 100% (Start: After Previous Action)

1 Like

OMG that worked for me too! Thanks