Prevent Flash of Unstyled Content with GSAP Animations

<style> [data-fouc-hide] { visibility: hidden; } </style> <script> document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll("[data-fouc-hide]").forEach(function (el) { const observer = new MutationObserver(function () { observer.disconnect(); el.removeAttribute("data-fouc-hide"); }); observer.observe(el, { attributes: true, attributeFilter: ["style"], }); }); }); </script>

What is FOUC?

FOUC stands for Flash of Unstyled Content. This is a brief moment where a webpage appears without its styles applied.

What is the context here?

Have you ever had a problem with GSAP, where the content shows before the GSAP animation kicks in.

We've got a script for you that solves this issue.

How to set it up

There's 2 sets of code, one is in the script tag, and one is in the style tag.
- The <script> tag needs to be inserted into your global code in the </body> tag
- The <style> tag needs to be inserted into your global code in the </head> tag
Once those have been added, you want to locate and select the element you are targeting with GSAP and do the following
- Go to the settings in webflow and find the custom attributes panel.
- Add the attribute name: "data-fouc-hide", leave the value blank

How it works

The attribute "data-fouc-hide" keeps the element invisible until GSAP is ready to take over.
Once GSAP applies its initial styles, the script detects that change and reveals the element.
This hands it off to your animation, so users never see the unstyled flash.