FOUC (Flash of Unstyled Content) here means elements briefly appearing in their final, visible state before JavaScript has run their animation. FX prevents it with a CSS rule that hides every .fx-* element by default, then reveals it (via GSAP's autoAlpha, which combines opacity and visibility) exactly when its animation starts.
On WordPress with the Fancoolo FX plugin, this is automatic — the plugin injects both rules below into <head> on every page load. Nothing to do. This page is for using FX outside WordPress, or in a custom theme that doesn't use the plugin.
The base rule
Add this in <head>, before any content renders:
.fx-text-reveal-pl,.fx-text-reveal-st,.fx-text-reveal,
.fx-reveal-pl,.fx-reveal-st,.fx-reveal,
.fx-spin-reveal-pl,.fx-spin-reveal-st,.fx-spin-reveal,
.fx-bg-reveal-pl,.fx-bg-reveal-st,.fx-bg-reveal,
.fx-scale-in-pl,.fx-scale-in-st,.fx-scale-in,
.fx-fade-in-pl,.fx-fade-in-st,.fx-fade-in,
.fx-blur-in-pl,.fx-blur-in-st,.fx-blur-in,
.fx-clip-up-pl,.fx-clip-up-st,.fx-clip-up,
.fx-clip-down-pl,.fx-clip-down-st,.fx-clip-down,
.fx-tilt-in-pl,.fx-tilt-in-st,.fx-tilt-in,
.fx-type-writer-pl,.fx-type-writer-st,.fx-type-writer,
.fx-draw-svg-pl,.fx-draw-svg-st,.fx-draw-svg,.fx-draw-svg-scrub,
.fx-split-words-pl,.fx-split-words-st,.fx-split-words,
.fx-slide-left-pl,.fx-slide-left-st,.fx-slide-left,
.fx-slide-right-pl,.fx-slide-right-st,.fx-slide-right{visibility:hidden}
The reduced-motion companion rule — required
With Respect reduced motion on (the default), FX skips every animation when the visitor's OS asks for less motion — which means the reveal that lifts visibility:hidden above never runs, and the content stays permanently invisible for that visitor. Add this rule right after the one above so visibility is restored when animations won't play:
@media (prefers-reduced-motion: reduce) {
.fx-text-reveal-pl,.fx-text-reveal-st,.fx-text-reveal,
.fx-reveal-pl,.fx-reveal-st,.fx-reveal,
.fx-spin-reveal-pl,.fx-spin-reveal-st,.fx-spin-reveal,
.fx-bg-reveal-pl,.fx-bg-reveal-st,.fx-bg-reveal,
.fx-scale-in-pl,.fx-scale-in-st,.fx-scale-in,
.fx-fade-in-pl,.fx-fade-in-st,.fx-fade-in,
.fx-blur-in-pl,.fx-blur-in-st,.fx-blur-in,
.fx-clip-up-pl,.fx-clip-up-st,.fx-clip-up,
.fx-clip-down-pl,.fx-clip-down-st,.fx-clip-down,
.fx-tilt-in-pl,.fx-tilt-in-st,.fx-tilt-in,
.fx-type-writer-pl,.fx-type-writer-st,.fx-type-writer,
.fx-draw-svg-pl,.fx-draw-svg-st,.fx-draw-svg,.fx-draw-svg-scrub,
.fx-split-words-pl,.fx-split-words-st,.fx-split-words,
.fx-slide-left-pl,.fx-slide-left-st,.fx-slide-left,
.fx-slide-right-pl,.fx-slide-right-st,.fx-slide-right{visibility:visible}
}
There's no !important on purpose — GSAP's own inline visibility style still needs to win when respectReducedMotion is turned off and animations do run under reduced motion.
Why this matters if you're seeing an invisible site
This is the single most common cause of "my whole page is blank" reports for hand-rolled (non-plugin) FX installs: the base hidden rule was copied in, but the reduced-motion companion rule wasn't — so any visitor (or automated testing tool) with reduced motion enabled sees nothing. See Troubleshooting if this is happening on a site using the plugin, where it should already be handled.
Text-based effects
textReveal, typeWriter and splitWords additionally set the parent element's visibility to inherit before animating its children, so the mask/split structure they create is visible while the base rule still hides everything that hasn't started yet.