Invisible content pops in before loading fully

[Maydris (Robert Bailey)]

Hey, so I just posted an update to my site and for some reason when the site is loading stuff that is set to be either off screen, opacity 0%, or otherwise just out of the way is popping in when the site loads.

I tried adding a load animation set to be positioned way above everything else to try to cover it up, but the stuff still would pop up over the loading animation briefly before the page finishes loading. Even if I also set the entire page to start off invisible!

Any recommendations to resolve this issue would be very much appreciated.

Video of the issue

---

Here is my site Read-Only: LINK
(Live Site)

[garymichael1313 (G.J.)]

Hi @Maydris,

You’ll need to add CSS Opacity on the element in the Styles panel. If you only do it in Interactions, the browser will show it before hiding it.

Of course, you could add a Hide/Show in Interactions, but for me, sometimes that didn’t work. Adding CSS always works.

[Maydris (Robert Bailey)]

hey @garymichael1313
So is it fair to say then that whatever I see in the viewport in the designer will be what shows up in that initial pop-in moment? So anything I want gone should be set to opacity 0 in the designer that will be triggered to full with a load interaction?

[argogiant (Kees Kroon)]

Don’t know if it works but in the interactions panel can’t you choose the option set as initial state?

So select the opacity 0% setting in your interaction menu and turn on “set as initial state”

hope this works let me know if it does or doenst

maybe you can find an answer here:

Interaction (Initial State NOT VISIBLE) SHOWING in the Designer

Hi, Is it possible to hide the elements that I have set to show via an interaction? I have an interaction that is purely for mobile devices. i.e It’s my mobile navigation. The interaction’s very first step in the sequence is set to initial state (not visible in the viewport), yet in my designer it is visible. Am I missing something or can I not hide any of the elements that are set to be revealed after clicking a button in the designer? Thanks! Here is my public share link: https://previe…

or here:

Initial state not working

Hi, I’ve set up an interaction on rollover, on the images in the STARRING section, at the bottom of the homepage: https://preview.webflow.com/preview/jmak?utm_source=jmak&preview=e4013901d4166e213fbaa2834cf57c38 This is the section with the animation. Those black overlays should not be visible initially. [15] I have the initial state set, which should have the overlay with the hotel title at 0% opacity and below the tile. It always starts with the overlay visible, however. Is there somethi…

[garymichael1313 (G.J.)]

Yes, just before you publish, set the parent element to “Opacity: 0”. When you publish and test it won’t flash before the page load. I know what you’re seeing and it’s a little annoying to me as well

[Maydris (Robert Bailey)]

@garymichael1313 @argogiant thanks guys, after some messing around with how the content was ordered and what was going to opacity 0 I got it. I ended up putting everything into a singular div that was the target of the initial state.

[garymichael1313 (G.J.)]

No problem… have a good week!

[nate199 (Nathan)]

Nice one guys, this worked a treat.