Invisible content pops in before loading fully

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)

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.

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?

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 :slight_smile: let me know if it does or doenst :slight_smile:

maybe you can find an answer here:

or here:

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 :slight_smile:

@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.

1 Like

No problem… have a good week! :smiley:

Nice one guys, this worked a treat.