分割テキストリビール — 動きの伝え方辞典

text

split text reveal / stagger text

分割テキストリビール

見出しを1文字(または1行)ずつに分割し、overflow: hiddenのマスクの中から時間差でせり上がって現れる動き。Awwwards系サイトのFVタイトルで最頻出のテキスト演出。

01 — Demo video

Play live →

02 — Prompt template

見出しに split text reveal を実装してください。

- テキストを1文字ずつspanに分割し、各文字を overflow: hidden の行内マスクで包む
- 各文字は translateY({{yOffset}}px)・opacity 0 の状態から {{duration}}s かけて元の位置へせり上がる
- 文字ごとに {{stagger}}ms ずつ transition-delay(またはGSAPのstagger)をずらす
- イージングは cubic-bezier(0.22, 1, 0.36, 1) のような強めのease-out
- 再実行時は transition を切って初期位置へ戻してから再生する(リセット処理を忘れない)
- prefers-reduced-motion 時は分割アニメーションを行わず全文を即表示する

見出しに split text reveal を実装してください。

- テキストを1文字ずつspanに分割し、各文字を overflow: hidden の行内マスクで包む
- 各文字は translateY({{yOffset}}px)・opacity 0 の状態から {{duration}}s かけて元の位置へせり上がる
- 文字ごとに {{stagger}}ms ずつ transition-delay(またはGSAPのstagger)をずらす
- イージングは cubic-bezier(0.22, 1, 0.36, 1) のような強めのease-out
- 再実行時は transition を切って初期位置へ戻してから再生する(リセット処理を忘れない)
- prefers-reduced-motion 時は分割アニメーションを行わず全文を即表示する

見出しに split text reveal を実装してください。

- テキストを1文字ずつspanに分割し、各文字を overflow: hidden の行内マスクで包む
- 各文字は translateY({{yOffset}}px)・opacity 0 の状態から {{duration}}s かけて元の位置へせり上がる
- 文字ごとに {{stagger}}ms ずつ transition-delay(またはGSAPのstagger)をずらす
- イージングは cubic-bezier(0.22, 1, 0.36, 1) のような強めのease-out
- 再実行時は transition を切って初期位置へ戻してから再生する(リセット処理を忘れない)
- prefers-reduced-motion 時は分割アニメーションを行わず全文を即表示する

03 — Params

stagger(文字間の時間差 ms) — 範囲 10〜120 / 初期 30
小さいほど一斉に、大きいほど1文字ずつ丁寧に出る。30前後が定番。
yOffset(移動距離 px) — 範囲 10〜80 / 初期 30
隠れている位置の深さ。文字サイズの1/2〜1倍程度が自然。
duration(1文字の表示時間 s) — 範囲 0.2〜1.2 / 初期 0.6
短いと軽快、長いとゆったり上品。staggerとのバランスで決める。

04 — Vocab

SplitText — テキストを文字・単語・行単位のspanに分割するGSAPのプラグイン。手書きならsplit("")とmapで同じことができる。
stagger — 複数要素のアニメーション開始を一定間隔ずつずらすこと。時間差表示の正体で、値ひとつでリズムが決まる。
行内マスク — overflow: hiddenの親で文字をクリップし、行の中から生えてくるように見せる手法。fade-inとの品の差はここで生まれる。
FOUC対策 — JS読込前に生テキストが一瞬見えてしまう問題。初期stateをCSSで隠すか、分割前のテキストを表示したままにするかを決めておく。

05 — NG → OK examples

言い方: 「「文字がパラパラって順番に出てくるようにして」」

なぜNG: 「パラパラ」だけでは出現の方向・移動距離・時間差が全部未定義。マスク(行内クリップ)の有無も伝わらないため、単純なfade-inのforループが返ってきがち。

言い方: 「「split text revealを実装。1文字ずつ分割してoverflow:hiddenのマスク内から、translateY 30px・duration 0.6s・stagger 30msで下からせり上げる。ease-out強め、reduced-motionは即表示」」

なぜOK: 分割単位・マスク・距離・時間差・イージングまで数値で指定している。特に「マスクの中から出る」の一言で仕上がりの品が大きく変わる。