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

GSAPとは？

GSAP（GreenSock Animation Platform）は、軽量でパワフルなJavaScriptアニメーションライブラリです。特にテキストや画像、スクロールアニメーションとの相性が抜群で、Webサイトに動きと印象を与えることができます。

テキストアニメーション

下記に表示される文字は、GSAPを使って1文字ずつ動きをつけたアニメーションです。

See the Pen Untitled by mori (@pdadmjrq-the-reactor) on CodePen.

カスタマイズ例

・テキスト変更：<span>の中身を自由に
・色・フォント：CSSで color や font-family を変更
・スクロールで再生：ScrollTrigger を導入して制御

まとめ

・GSAPはアニメーション制作に強力なライブラリ
・テキストを1文字ずつ動かすことで印象的な表現が可能
・簡単にカスタマイズできて、見た目も大きく変わる

Webサイトのクオリティを一段引き上げるなら、GSAPの導入は間違いなくおすすめです！
ぜひ取り入れてみてください！