Share Posted July 3, 2012 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 More sharing options...
Share Posted July 3, 2012 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 More sharing options...
Share Posted July 4, 2012 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now