テキスト演出系

Split Text Gradient Wave

文字分割アニメーションとグラデーションテキストを重ねて、見出しだけで空気感を作る表現です。

Y
Yutaka Kizaki
@junkbranding
2026年5月19日
読了時間: 5分
構成 / File Structure
</>Code Viewer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

はじめに

自分用メモ。

見出しは長く動かすより、最初の一瞬で印象を残す方が使いやすい。特に文量が少ない場面では、文字の出方だけで空気が決まりやすい。

このサンプルでは、順番に立ち上げたあとで弱いウェーブを残している。登場だけで終わらせず、でも騒がしくしない余韻として覚えておく。

組み合わせのポイント

  • 最初は文字ごとに順番をつけて、読み始めるリズムをつくる
  • グラデーションは派手さより面の流れを見せるために使う
  • 下線の出現を区切りとして入れ、見出しのまとまりを支える
  • 最後のウェーブは小さく保ち、常に動いている感じを出しすぎない
  • 文字数が多い場合は、分割数に対してアニメーション速度を少し抑える

実装のポイント

  • テキストは文字ごとに分割して、初期表示のスタッガーを細かく調整できるようにする
  • グラデーションや下線は本文とは別レイヤーで持ち、演出の役割を分離する
  • ウェーブは常時ループでも振れ幅を小さくし、静止に近い余韻として扱う
  • 文字数が増えたときに破綻しやすいので、速度と stagger のバランスを先に見る

まとめ

覚えておくのは、テキスト演出は強いエフェクトより順番と止まり方。立ち上がりと余韻の 2 つで十分調整できる。

タグ

GSAPアニメーションテキスト

関連記事