Jump to content
GreenSock

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

flicker on first 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

Hi guys,

 

I have been working on some banners over the past few days. I have setup an init() function which positions all of the animated images and text (which looks like this):

 

        function initCSS() {

            TweenLite.set(("#intro"), {y: 380}),

            TweenLite.set(("#titleHolder"), {x: -200}),

            TweenLite.set((".t-2"), {x: -200}),

            TweenLite.set(("#product1"), {x: -200}),

            TweenLite.set(("#product2"), {x: -200}),

            TweenLite.set(("#cta"), {x: -200})
        }
I have the GS stuff in its own JS file and the CSS and html together in the html file.

 

GS is brought in at the top of the HTML file and the external JS GS stuff at the bottom.

 

When the banner is very first loaded all of the stuff which animates above is all out of position and flickers. Its as if the init() is taking a few milliseconds to kick in so its falling back on the standard css for positioning. Text and images are all overlapped etc.

 

What is the best way to prevent this happening?

 

Cheers,

 

Ste

Link to comment
Share on other sites

Hi nolimit966,

 

Welcome to the forums!

 

That is exactly right, it will take a few milliseconds for the JS to kick in.

 

The best thing you can do is to hide your elements and wait until everything is loaded before showing the content.

 

I personally will hide the whole banner, set the positioning in CSS and do a bunch of .from() tweens to make the elements land in their end position, rather than having to have a .set call for each element.

 

This is a safe way to wait until all elements are loaded, courtesy of our dear and knowledgeable Jonathan:

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

 // wait until window, stylesheets, images, links, and other media assets are loaded
 window.onload = function() {

  // Your code and/or method calls here

 };
});
  • Like 5
Link to comment
Share on other sites

My default is a fullscreen fader.div which is hiding every elemen till the first JS tween line is .to()-ing it to autoAlpha:0

Link to comment
Share on other sites

Worked perfect that, I added:
 

        document.getElementById("mainwrapper").style.display = "none";

to the bottom of the HTML and then used 

 document.getElementById("mainwrapper").style.display = "block";

just after the window.onload function - worked a treat - Thanks :-)

Link to comment
Share on other sites

if your using autoAlpha then all you have to do is add the CSS property visibility:hidden on the element in your stylesheet.

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

@Jonathan you are a GSAP Jedi :) Thank you!

  • Like 1
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.

×