Prevent Flash of Unstyled Content with GSAP Animations
A simple fix for unwanted flashing of content before GSAP animations kick in.
Javascript
Copy Code
<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.
Fancy a Free Quote?
Got a crazy idea? We’re all ears. Reach out, share your story, and let’s make some magic together. Click below to get your free quote.
