Streaming live at 10am (PST)

Invisible element still visible on page load

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

Hello @unksup

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

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

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?

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

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

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

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