Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flysi3000

Hiding banner elements on load

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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!

Share this post


Link to post
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.

<head>
<style>
 .banner {visibility:hidden}
</style>
</head>

<body>
 <div class = "banner>

... banner stuff

</div>

<script>
TweenLite.from(".banner", 1, {autoAlpha:0);
</script>

</body>

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

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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()
{
    tl.play();
}

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.

Share this post


Link to post
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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×