Webflow が FOUC（Flash of Unstyled Content）を自動で防止するようになりました！

※この記事は2025年11月10日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Automatic handling for Flash of Unstyled Content (FOUC)

‍

Webflowの「Interactions with GSAP」は、プロクオリティのアニメーションをコード不要で扱える強力な機能です。
スムーズなフェード、ダイナミックなエントランスアニメーション、スクロールに応じた演出などを視覚的なワークフローのまま実装できます。

しかし、これまで唯一残っていた課題がFOUC（Flash of Unstyled Content） でした。
これはアニメーションが始まる前に、要素が一瞬だけ “デフォルトのCSSの状態で表示されてしまう” 現象で、細部までこだわったアニメーションの印象を損ねる原因となっていました。

‍

WebflowがFOUCを自動防止

本日より、WebflowはGSAPを使ったインタラクションでFOUCを自動的に防ぐ仕組みを導入しました。
これにより、アニメーションがより自然で滑らかに見えるだけでなく、サイトの安定性やユーザーの信頼性向上にもつながります。

‍

技術的にはどのように動作するのか？

今回の改善は、以下のような仕組みで実現されています。

• Designer（デザイナー）では常に要素を表示した状態で編集が可能
• 公開したサイトでは、JSのアニメーションが始まる前にCSSで要素を一時的に非表示状態に設定
• レイアウトシフト（ガタつき）やチラつきを防止
• FCPやCLSなどのCore Web Vitalsに影響を与えない安全な実装

従来は開発者が手動で対処していた部分を、Webflowが自動的に公開時に処理してくれるようになりました。

‍

ロールアウトについて

この改善は、今週よりすべてのWebflowユーザーへ順次展開されています。
特別な設定は不要で、GSAPインタラクションを使う全サイトで自動的に適用されます。

‍