Invisible element still visible on page load

Community resources Bugs
1

Hi,

I got a DIV showing on page load, even though I’ve set its opacity =0.
I’ve also tried with display=none.
Also tried with scale=0 on page load.
Also tried display=none on page load - it appears briefly then disappears.

Nothing works.

Here’s the project link:
https://preview.webflow.com/preview/primavera-upform?utm_source=primavera-upform&preview=4ded26b67d1145981f0e9c51579c5662

Here’s the project page: primavera-upform.webflow.io/project-1

Here’s a screengrab: https://vimeo.com/306706652

Thanks for any help!

M

2

Hello @unksup

Are you still having this issue because I can’t replicate the issue on my end.

3

Hi Aaron,

Yes, I’m now trying to move the DIV out of the page, so when the page loads, it’s not physically there.
But it’s not consistent from desktop to tablet/mobile.

Didn’t know Webflow is so buggy… seems to me it’s more for programmers rahter than for designers…

Can you please share your project where you don’t have the bug? I read about this in other posts, it seems like it’s a bug not solved yet.

Thanks!

M

4

I don’t see the div even in your read only link, can you please take a screenshot of it?

What do you mean by this?

What is the Webflow bug you’re experiencing? I can see that the issue is more design and interaction related rather than a Webflow bug.

I’m using opera at the moment but I’ve tried Safari and Chrome and I don’t see it there either.

Can you share the forum posts you’re referring here please?

5

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

6

Have you tried to set your element to initinal state in the animation?

7

Hi Janne,

Thanks! I went with another solution, but I tried again your suggestion on a test page, paying attention to initial states in animation. And it worked. I might go back to it.

I have basically two buttons that turn on and then off a DIV. The DIV was selected in both animations as initial state - once with 0% opacity, and then with 100% opacity.

I’m not sure, but this might have been the whole issue.

Thanks again!

M

1 Like
8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.