Invisible element still visible on page load

Hi Aaron,

Thanks for trying to help.

Well, more fundamentally, I’d like to first understand the basic principle: why does a transparent (0% opacity) element still shows when the page loads? Is it because it’s included in an animation?

The initial issue: the project info (a div with text inside it) was displayed when the page loaded. I tried to solve this issue in different ways, but the project info was still appearing. I’ve posted a screen grab.

If you tried this and you have no issue, please send me the Webflow file.

Now, I thought that by literally moving the div (with relative positioning) outside the page would be a solution (mediocre, but a solution). And it works, but the issue I have now is that the div with info behaves differently from desktop to tablet+mobile.

The Webflow bug I’m having now is that by moving the div 100% to the right (so it’s out of the page when page loads), when I’m moving it back via the ”Project Info” button, I can’t use different animation settings for desktop vs tables/mobile.

I’m saying this as a designer who would love to use Webflow just like InDesign. I agree with you that it’s more like an interaction bug. I’m callling it a bug because I don’t know where the problem is.

Here’s a related post:

https://discourse.webflow.com/t/set-as-initial-state-flickers-on-page-load/59791/8

Thanks,

M