- 説明
-
GSAPの SplitText プラグイン（3.13以降は商用含め無料）で見出しを1文字ずつ分割し、
stagger: { each: 0.02, from: 'random' }
でスクロールイン時にランダムな順に出現させる。
- 元ref
-
ref-001 Farm Minerals（LP/references/ref-001-farm-minerals.md の演出パターン3）
- 案件への移植メモ
-
demos/scramble-text/main.ts
の [data-scramble-text]
ブロックを、案件の
src/animations/<パターン名>.ts
に init 関数として切り出し、src/animations/index.ts
に登録する。gsap.registerPlugin(SplitText)
を忘れずに。
- テンプレの data-scramble との違い
-
テンプレートの
data-scramble
は自前の文字分割だが、SplitText は
revert()
で元のDOMに復元でき、行・単語単位の分割（type: 'lines' / 'words'）も選べる。