Jump to content
Search Community

Hiding banner elements on load

flysi3000 test
Moderator Tag

Go to solution Solved by Carl,

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!

Link to comment
Share on other sites

  • Solution

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
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()
{
    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.

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.
×
×
  • Create New...