Mask Reveal
マスクリベール
どんな動き？
画像やボックスの上に重ねた色付きのパネルが横にスライドして外れることで、下にある要素が徐々に姿を現すアニメーション。カーテンが開くような演出効果があり、ポートフォリオサイトの画像や見出し、ヒーローセクションなど「見せる」ことを印象づけたい場面でよく使われる洗練された表現。
よく使う場所
ポートフォリオ画像ヒーロー画像見出しギャラリー
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Reveal the element as a colored panel slides away to uncover it.Trigger:
When the element enters the viewport (Intersection Observer).
Initial state:
Panel covers the element completely (translateX: 0%).
Element itself is fully rendered underneath.
Animation:
The panel slides horizontally off the element, uncovering it like a curtain opening.
Final state:
Panel: translateX: 100% (fully off, hidden)
Element: fully visible
Timing:
duration: 0.9s
easing: ease-out
Play only once.実装方法の候補
この動きは以下の技術で実装できます。
CSS (transform + overflow: hidden)GSAPIntersection Observer
別名・関連ワード
Reveal MaskSliding MaskCurtain Reveal