Wipe Transition
ワイプトランジション
どんな動き？
画面いっぱいの単色パネルがカーテンのように片側から反対側へ通過し、通り過ぎたあとには裏側のコンテンツが入れ替わっているアニメーション。パネルが画面を覆っている一瞬の間に切り替えを済ませることで、変化そのものを隠しながら滑らかにつなげられるのが特徴。GSAPやbarba.jsと組み合わせて、セクション切り替えやページ遷移のアクセントとして使われる。
よく使う場所
ポートフォリオブランドサイトキャンペーンLP
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Sweep a solid color panel across the screen from left to right, swapping the content underneath while it fully covers the view.Trigger:
click on a trigger element or section change.
Initial state:
Panel: off-screen to the left
Content A: visible
Animation:
The panel slides in from the left, fully covers the viewport, and continues sliding out to the right; the content underneath swaps from A to B at the instant the panel fully covers the screen.
Final state:
Panel: off-screen to the right
Content B: visible
Timing:
duration: 0.8–1s for the full pass, easing: ease-out. Play once per trigger.実装方法の候補
この動きは以下の技術で実装できます。
CSSGSAPbarba.js
別名・関連ワード
Curtain TransitionPanel WipeScreen Wipe