クリップリビール — 動きの伝え方辞典

media

clip-path reveal / image reveal

クリップリビール

clip-path: inset()で隠した画像を、指定方向へ切り開いて見せるリビール演出。動くのはマスクだけで画像自体は動かないため、切れ味のある「現れ方」になる。スクロールに合わせた画像の登場演出の定番。

01 — Demo video

Play live →

02 — Prompt template

画像の表示に clip-path reveal を実装してください。

- 初期状態はclip-pathで全隠しにする(左から: inset(0 100% 0 0) / 下から上: inset(100% 0 0 0) / 中心から: inset(50%))
- 表示トリガーで clip-path: inset(0) へ {{duration}}s かけて開く。方向は {{direction}}
- easingはease-outではなく cubic-bezier(0.16, 1, 0.3, 1)(easeOutExpo系)を使う
- 画像自体はtransformで動かさない(マスクだけが動く)。動かす場合も逆方向へ10%までに抑える
- 一度表示したら開いたまま維持する(スクロールで戻っても再生し直さない)
- prefers-reduced-motion 時はクリップなしで即座に表示する

画像の表示に clip-path reveal を実装してください。

- 初期状態はclip-pathで全隠しにする(左から: inset(0 100% 0 0) / 下から上: inset(100% 0 0 0) / 中心から: inset(50%))
- 表示トリガーで clip-path: inset(0) へ {{duration}}s かけて開く。方向は {{direction}}
- easingはease-outではなく cubic-bezier(0.16, 1, 0.3, 1)(easeOutExpo系)を使う
- 画像自体はtransformで動かさない(マスクだけが動く)。動かす場合も逆方向へ10%までに抑える
- 一度表示したら開いたまま維持する(スクロールで戻っても再生し直さない)
- prefers-reduced-motion 時はクリップなしで即座に表示する

画像の表示に clip-path reveal を実装してください。

- 初期状態はclip-pathで全隠しにする(左から: inset(0 100% 0 0) / 下から上: inset(100% 0 0 0) / 中心から: inset(50%))
- 表示トリガーで clip-path: inset(0) へ {{duration}}s かけて開く。方向は {{direction}}
- easingはease-outではなく cubic-bezier(0.16, 1, 0.3, 1)(easeOutExpo系)を使う
- 画像自体はtransformで動かさない(マスクだけが動く)。動かす場合も逆方向へ10%までに抑える
- 一度表示したら開いたまま維持する(スクロールで戻っても再生し直さない)
- prefers-reduced-motion 時はクリップなしで即座に表示する

03 — Params

duration(リビール時間 s) — 範囲 0.3〜2 / 初期 0.9
0.8〜1.2sが見せ場向き。expo系easingなら長めでも間延びしない。
direction(現れる方向) — 選択: left / up / center（初期: left）
leftは左端から右へ、upは下端から上へ、centerは中心から四方へ開く。

04 — Vocab

clip-path: inset() — 上・右・下・左の内側オフセットで矩形マスクを作る関数。この値をアニメーションさせると「切り開く」動きになる。
リビール — 隠していたものを演出付きで見せる手法の総称。マスク・カーテン・ワイプはすべてこの仲間で、方向と速度が性格を決める。
easeOutExpo — 冒頭が速く終端で急減速するイージング。cubic-bezier(0.16, 1, 0.3, 1)が定番で、リビールの「スッ…ピタッ」という切れ味を作る。
カウンターモーション — マスクの動きと逆方向へ画像を少しだけ動かす技。奥行きが出るが、量が多いと酔うので10%以内に抑える。

05 — NG → OK examples

言い方: 「「画像をシュッと表示させて」」

なぜNG: 「シュッ」がフェードなのかスライドなのかマスクなのか決まらない。opacityだけの平凡なフェードインや、画像ごと移動してレイアウトが揺れる実装になりがち。

言い方: 「「clip-path revealを実装。inset(0 100% 0 0)→inset(0)を0.9s、cubic-bezier(0.16,1,0.3,1)。画像は動かさずマスクのみ。一度開いたら維持」」

なぜOK: 初期値・終了値・時間・easing・再生ポリシーがすべてある。inset()の値そのものを書けば、方向の解釈違いが起きようがない。