GreenSock: Preventing Flash of Unstyled Content on Load

Topics Covered in This JavaScript Tutorial:

Using Chrome's DevTools to Simulate Network Throttling, Eliminating Flash of Unstyled Content (FOUC) During Load, Validating Your Ad with Google's HTML5 Validator

Exercise Preview

Exercise Overview

In this exercise, you'll tackle a common performance issue that plagues modern web animations: the dreaded flash of unstyled content (FOUC) that occurs before GSAP.js finishes loading. You'll master Chrome's DevTools performance profiling capabilities and learn the industry best practices for creating and validating Google Ads that pass platform requirements on the first submission.

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 for performance analysis.)

   This is the animated banner ad you created in the previous exercise. While functional, it has performance issues that would be immediately flagged by any seasoned front-end developer or ad operations team.

   Important: If the animation fails to load, disable any ad blockers in your browser. Ad blockers can prevent GSAP libraries hosted on CDNs from loading properly—ironically creating the exact performance issues we're about to solve.

Using Chrome's DevTools to Simulate a Slow Network

Real users don't always enjoy the luxury of fiber-optic internet speeds. To build truly professional web experiences, you must test how your animations perform under realistic network conditions. Chrome's DevTools provides sophisticated network throttling capabilities that let you simulate everything from slow 3G to complete offline scenarios.

1. Ctrl–click (Mac) or Right–click (Windows) anywhere on the page and choose Inspect from the context menu.
2. In the DevTools panel, click on the Performance tab. If it's not visible, click the >> button to the right of the Elements tab and select Performance from the dropdown menu.

3. Click the gear icon on the right to reveal the performance settings panel. We'll focus on the Network throttling options.

   

4. For Network throttling, select Slow 3G. This simulates conditions still common in many parts of the world and on mobile networks under poor signal conditions.

5. At the top left of the DevTools panel, click the Record button to begin performance profiling.

   

   • Press Cmd–R (Mac) or Ctrl–R (Windows) to reload the page while recording.
   • Wait patiently for the banner animation to begin—throttled connections can take several seconds—then immediately click Stop to end the recording.

6. Hover your cursor over the timeline to see frame-by-frame screenshots of what users actually experienced during the load process.

   

7. While hovering over the timeline, move left and right to locate the page reload point. You'll notice the text appears immediately and remains visible for several seconds before suddenly disappearing and scaling back up.

   Here's what's happening behind the scenes: Before GSAP loads and initializes, browsers render HTML elements in their default state. Once GSAP finally downloads and parses your animation code, it immediately prepares elements for animation by setting their initial states (scaling down text, adjusting opacity, etc.). This preparation causes the visible "flash" as elements jump from their natural state to their animation-ready state.

   This flash of unstyled content (FOUC) is unprofessional and jarring for users. On slower connections—which represent a significant portion of global web traffic—this delay can last several seconds. Fortunately, there's a straightforward solution that every professional front-end developer should know.

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

The industry-standard approach to eliminating FOUC involves hiding content until all critical resources have loaded, then revealing everything simultaneously as the animation begins. This creates a smooth, professional user experience regardless of connection speed.

1. In your code editor, navigate to the css folder and open main.css.

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

   #banner {
      visibility: hidden;
      overflow: hidden;

   Code Omitted To Save Space

   }

3. Save the file and reload the page in Chrome.

   The banner should now be completely hidden, displaying only the gray background. This ensures users never see the unstyled content. Next, we'll programmatically reveal the banner once all resources have loaded using JavaScript event listeners.

4. Event listeners execute functions when specific events occur. In index.html, wrap your entire animation code within 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 event listener that triggers the animation only after the page and all its resources have completely loaded:

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

6. Finally, instruct GSAP to reveal the banner immediately before starting any animations:

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

7. Save your changes and reload the page in Chrome.

   • With network throttling still active, observe how the page now displays only the gray background during the loading process.
   • Once all resources finish loading, the red banner background appears instantly and the animation begins immediately—no flash, no jarring transitions.

   This professional approach ensures a consistent, polished user experience across all network conditions.

8. In the Performance panel, reset the Network throttling to No throttling to restore normal speeds.
9. Close the DevTools panel to return to normal browsing mode.

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

Before submitting ads to major platforms like Google Ads, you must ensure they meet strict technical requirements. These guidelines exist to maintain platform performance and user experience standards. Failing to validate your ads beforehand often results in rejection and project delays.

Google HTML5 ads must comply with the following requirements as of 2026:

• File size limit: Maximum 150 KB total (GSAP libraries and Google Fonts are excluded from this calculation).
• Font restrictions: Custom fonts must be sourced exclusively from Google Fonts. No local font files or third-party font services are permitted.
• File count limit: Maximum 40 files per ad package.

• Size declaration: You must include a meta tag specifying the ad dimensions using Google's approved sizes:

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

  Note: This meta tag has been included in the project files as a reference example.

• Click handling: Never hard-code destination URLs. Google's ad platform dynamically inserts click destinations through their clickTag system. Wrap your entire ad in a link element that references this clickTag variable. An implementation example is included in the project files.

• Updated guidelines: Google continues to refine their HTML5 requirements. For the most current specifications, consult support.google.com/admanager/answer/7046799

Package all files into a compressed .zip folder for submission to Google. Before submitting, always validate your package using Google's official validator at h5validator.appspot.com/adwords/asset. This tool catches common issues that would otherwise result in rejection.

Common validation gotcha: Google Fonts automatically includes preconnect link tags in their generated code, but Google's ad validator flags these as violations. You must manually remove the following lines before validation:

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