Wipe Reveal
ワイプリベール
どんな動き？
要素の左右を覆っていた2枚のパネルが、カーテンのようにそれぞれ外側へ開いていくことで中身を見せるアニメーション。一方向のマスクよりも舞台の幕が上がるような演出性があり、動画のカット切り替えや強調したい画像、セクションの導入部分などに使われる。
よく使う場所
ヒーローセクション動画サムネイルセクション導入ギャラリー
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Reveal the element as two panels wipe apart to either side, like curtains opening.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
Left panel and right panel both cover the element completely (translateX: 0).
Animation:
The left panel slides out to the left, the right panel slides out to the right, simultaneously.
Final state:
Left panel: translateX: -100%
Right panel: translateX: 100%
Element fully visible.
Timing:
duration: 0.9s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (transform + overflow: hidden)GSAPIntersection Observer
別名・関連ワード
Curtain WipeSplit Reveal