Hide Unloaded Content?

[soupking]

Hi everybody,

 

I'm not entirely sure if this is a GSAP question or a html5/css in general but I have this reveal to my website using the GSAP and my content loads, then disappears, then fades back in. I need it to disappear from the gate so images and text aren't showing before the reveal.

 

There's various ways of hiding content. I'm doing one right now and it's obviously not working very well. So I was wondering if there was a relatively standard way people hide content so this sort of thing doesn't happen? Does one technique work better than another? Is it the way my mark-up is laid out?

 

If it helps, here's the link:

 

axiom-media.com/__staging/2014

 

I'm aware of the crop mark as well, but need to figure this situation out before moving forward. In any case, thanks for reading.

[Carl]

In your css give your elements or their parent a visibility:"hidden"

#content {
  visibility:hidden;
}

then when you are ready to run your javascript (presumably after everything loads) you can tween the #content's autoAlpha from 0

TweenLite.from("#content", 1, {autoAlpha:0})

or use set() (creates a tween with a 0-second duration)

TweenLite.set("#content, {autoAlpha:1});

Here is a very basic demo that shows how a large image will load but not be visible for 2 second (no flicker) http://codepen.io/GreenSock/pen/wvemg

 

You can read about autoAlpha in the CSSPlugin docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

 

--

 

Here is another approach just using visibility on the parent and opacity on the children:

http://codepen.io/GreenSock/pen/Hmqzd

 

The common approach is setting visibility:hidden in your style-sheet so that will get applied immediately.

[soupking]

Excellent news. I won't forget that going forward. Thanks a bunch Carl.