Jump to content


Hiding banner elements on load

Recommended Posts

Does anyone have a preferred method for making sure that everything that's supposed to be hidden when the banner loads is actually hidden? I've had a recurring issue where sometimes, there's a quick flicker of all the hidden text/graphics before the animation kicks in. Currently, everything's fading in using  .from autoAlpha:0, and it usually works, but is there something that's more bulletproof? Thanks!

Link to comment
Share on other sites

hmm, when using from autoAlpha:0 its imperative that the target of that tween also have css that sets visibility:hidden and that the CSS is present before the DOM gets processed.

 .banner {visibility:hidden}

 <div class = "banner>

... banner stuff


TweenLite.from(".banner", 1, {autoAlpha:0);


If that setup does not work for you, please post a reduced test case. Would be interested to look into it further.

  • Like 3
Link to comment
Share on other sites

What Carl said.


What I always do is name the topmost parent "#ad", set it visibility to "hidden", run all the logic, setup and whatnot, instantiate the timeline and then, only then, do a .set(ad, {autoAlpha:1});

  • Like 3
Link to comment
Share on other sites

Cool - just wanted to make sure. I was looking at another dev's work and it looks like he skipped the step of hiding the containing div. Thanks!

Link to comment
Share on other sites

I always do the visibility hidden thing, but another thing I did recently because I had two images on the first frame that loaded at slightly different speeds (I'm talking fractions of a second, but it bothered me) I set my timeline to paused and added

window.onload = function()

so the banner wouldn't start until all of the images have loaded.  Since the banner is only 100k in file size there's no noticeable delay, but both images are already loaded when the banner appears, which looks a lot smoother.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.