GSAPで作るSplitText見出しとCTAバナー演出

はじめに

gsap-skills でも強調されているように、順番を持つ演出は timeline でまとめた方が意図を保ちやすくなります。このバナーでは、見出しだけを目立たせるのではなく、本文と CTA までを同じ拍で入れて、ひとつの塊として見せています。

実装のポイント

• 見出しは SplitText で分割し、単語よりまず行単位の見え方を整える
• 初期表示は opacity と transform を中心にし、レイアウトを崩さずに立ち上げる
• CTA は本文より少し遅らせて出し、視線の着地点を明確にする
• 背景の軌道は別 tween に分け、主役のタイムラインを汚さない

使いどころ

ポートフォリオの冒頭、キャンペーン LP のヒーロー、イベント告知の見出しブロックなど、短い文量でも温度感を出したい場面に向いています。文言を差し替えても成立しやすいので、再利用しやすい型です。