GreenSock: Preventing Flash of Unstyled Content on Load

Topics covered in this JavaScript tutorial:

Using Chrome’s DevTools to Simulate a Slow Network, Preventing Flash of Unstyled Content on Load, Checking Your Ad Using the Google Ads HTML5 Validator

Exercise Preview

Exercise Overview

In this exercise, you’ll prevent a flash of unstyled content which can appear prior to the GSAP .js file being downloaded. You’ll also learn more about setting up and validating Google Ads.

Getting Started

1. For this exercise we’ll be working with the GSAP-FOUC folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open index.html from the GSAP-FOUC folder.

3. Preview index.html in Chrome. (We’ll be using its DevTools.)

   This is the animated banner ad you created in the previous exercise, but let’s look at a couple issues we didn’t address yet.

   If the animation does not work, disable any ad blockers in your browser. They can block the GSAP library from Google!

Using Chrome’s DevTools to Simulate a Slow Network

How will this load if people are on a slow internet connection? Even if you have fast internet, you can simulate a slow connection using Chrome’s DevTools.

1. Ctrl–click (Mac) or Right–click (Windows) anywhere on the page and choose Inspect from the menu.
2. In the DevTools, click on the Performance tab. If you don’t see it, to the right of the Elements tab click the >> and choose Performance from the menu.

3. Click the gear on the right to show settings (we’re interested in Network throttling).

   

4. For Network, set the throttling to Slow 3G.

5. At the top left of the DevTools, click the Record button.

   

   • Hit Cmd–R (Mac) or Ctrl–R (Windows) to reload the page.
   • As soon the banner starts to animate click Stop (be patient, it can take a while on the throttled connection).

6. Hover over the timeline and you’ll see a preview (screenshot) of what was recorded.

   

7. While hovering over the timeline, move right/left to find the point where you reloaded the page and notice the text will be visible for quite some time, and then it will disappear and scale back up.

   So what’s happening? Before we animated the page with GSAP, we could see the text. Once GSAP loads, GSAP will notice parse all the animation code and notice we want to scale up the text, so it will shrink it down (or make it transparent, etc., whatever it needs to do to prepare it for animations that are to come) and then GSAP will animate it to the final appearance.

   So if GSAP takes a while to load (like it can on a slower connection), people could see the unprepared assets before they flash away and then animate. Obviously this is not a good situation, but don’t worry there’s a solution.

Preventing a Flash of Unstyled Content (FOUC) on Page Load

1. In your code editor, from the css folder open main.css.

2. In the #banner rule add visibility: hidden as shown below in bold:

   #banner {
      visibility: hidden;
      overflow: hidden;
   

   Code Omitted To Save Space

   }
   

3. Save and reload the page in Chrome.

   Everything should be now hidden, so all you’ll see is the gray background. Now we need to unhide things once the page (including GSAP) has completely loaded. We’ll do this with an event listener.

4. Event listeners will execute a function, so back in index.html wrap the entire animation in a function:

   <script>
   function animate() {
      let tl = gsap.timeline( {repeat:3, repeatDelay:2} );
   

   Code Omitted To Save Space

      .from('#order-now', {duration:0.5, scale:0, opacity:0, ease:'back.out'})
   }
   </script>
   

5. Below the function, add an eventlistener that will run the function when the page has finished loading.

   }
   window.addEventListener('load', animate);
   </script>
   

6. Lastly we need GSAP to reset the banner’s visibility before it animates anything:

   tl
   .set('#banner', {visibility:'visible'})
   .from('#panel1-text', {duration:0.5, scale:0.5, opacity:0, ease:'back.out'})
   

7. Save and reload the page in Chrome.

   • Be patient as the throttled connection slowly loads everything. During this time you should see only the gray background.
   • Once it’s done loading, the red background should appear and the animation will immediately start.

   Problem solved!

8. In the Performance panel, for Network, set the throttling back to No throttling.

9. Close the DevTools.

For Your Reference: Checking Your Ad Using the Google Ads HTML5 Validator

If this will be submitted to an ad network like Google, you should look over their guidelines to make sure it won’t get rejected. For example, Google HTML5 ads:

• Must be 150 KB or less (GSAP & Google Fonts are not included in that amount).
• Custom fonts can only be from Google Fonts.
• The maximum number of files included is 40.

• You must have a meta tag (shown below) to tell Google the ad size (they have a list of specific ad sizes you must use).

  <meta name="ad.size" content="width=300,height=250">

  NOTE: This was added to the file in this project if you want to see an example.

• Do not link to websites. One link will be added through the Google Ad campaign. To use their link, wrap the entire ad in a link (it has a JavaScript reference to Google’s clickTag where it grabs the link). We did that in the file for this project if you want to see an example.

• Learn more about Google’s HTML5 guidelines for Ad Manager at support.google.com/admanager/answer/7046799

All the files must be in a folder that you zip compress. The .zip file is submitted to Google. Before you submit the zip file to Google, run it through h5validator.appspot.com/adwords/asset to check for problems.

For example, we got a validation error and discovered that Google fonts includes the following 2 lines of code, but you must remove them for it to validate properly.

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>