Jump to content
Search Community

Whats best practice to avoid the JS "flicker" in GSAP?

azuki test
Moderator Tag

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

Hi all,

 

I'm in my first JS GSAP project and I've just discovered what seems to be a long standing issue with Javascript: fading in elements after the page has loaded, causing a "flicker" before they're able to start in their opacity:0; state.

 

I have my elements starting at opacity:0; in my CSS and in my JS, I'm using TweenMax.from to {css:{autoAlpha:0}.

 

What's the best practice here to prevent that flicker? Any good workarounds specifically using GSAP correctly for a simple fade in?

 

Thanks as always!

Link to comment
Share on other sites

any chance, you could provide a super simple example of the flicker? Perhaps just 1 or 2 divs. Just enough to see the problem?

 

If I recall, setting a containing div to visibility:hidden in the css seemed to work.

 

my simple test doesn't show any flicker, although I'm sure I've seen it before.

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="js/TweenMax.min.js"></script>
<script>
function start(){
TweenLite.from(document.getElementById("content"), 1, {css:{autoAlpha:0}}); 
}
window.onload = start;
   </script> 
</head>
<body>

<div id="content">
<p>Most other animation tools offer very limited controls, but GSAP was built from the ground up to be a professional-grade robust set of animation tools. You can easily pause(), resume() reverse(), restart(), seek(), or even alter the timeScale of any tween. In fact, you can tween the timeScale of another tween to gradually slow it down or speed it up. To control a tween, however, you need an instance to work with. </p>
</div>


</body>
</html>

 

please provide something simple that replicates that problem that we can test and we'll see what we can come up with.

Link to comment
Share on other sites

Yep, Carl is right - just set your CSS visibility:hidden initially and use autoAlpha to fade it in because autoAlpha will automatically interpret an initial visibility:hidden value to mean opacity should also start at 0. Make sure you're using the latest version too please.

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