文字を演出する（Text Animation）
このページでは、GSAP（SplitText・ScrambleText）とFramer Motionを使った文字アニメーションの実装パターンをインタラクティブなデモとコードで確認できます。
💡 GSAPのSplitText・ScrambleTextプラグインは2025年4月より完全無料で利用可能になりました。
文字アニメーションはテキストを文字・単語・行単位で分割し、それぞれに個別のアニメーションを適用する表現。ヒーローセクションやローディング画面など、視線を集めたい場面で使われる。
GSAPのSplitTextはテキストの分割を自動化するプラグイン。Framer Motionでは手動でspanに分割する必要があり、実装コストに大きな差がある。
Framer Motion
実装方法の比較
| 項目 | Framer Motion | GSAP |
|---|---|---|
| 文字の分割 | 手動でspanに分割（JSX内で処理） | SplitTextが自動で文字・単語・行に分割 |
| 実装コスト | 高（分割ロジックを自前で書く必要あり） | 低（SplitTextに任せるだけ） |
| スクランブル | 非対応（自前実装が必要） | ScrambleTextプラグインで簡単に実装 |
| 行単位の分割 | 非対応（手動で改行を管理） | SplitTextがlines配列を自動生成 |
| stagger | staggerChildren + delayChildrenで対応 | staggerオプションで直感的に指定 |
🤖 AIプロンプトテンプレート
Next.js + GSAP でテキストアニメーションを実装してください。 - SplitTextで文字を1文字ずつ分割 - staggerで時間差フェードイン - ScrambleTextでスクランブルエフェクト - useGSAPフックとcontextSafeを使用 - TypeScript / Tailwind CSS v4 を使用
同じカテゴリの他のページ
動きの質感を選ぶ（Easing）
イージングの違いを体験で比較。power・back・bounce・elasticなどGSAP・Framer Motion・CSS Transitionのeaseを一覧・比較できるUIパターン実例集。
スクロールで物語る（Scroll Storytelling）
GSAPのScrollTriggerで実装するスクロール演出のサンプル。scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションのUIパターン実例集。デモ・コード付き。
スクロールで見せる（Scroll Reveal）
スクロールで見せるアニメーションのサンプル。whileInView・IntersectionObserverを使ったUIパターン実例集。Framer MotionとIntersection Observer APIで実装比較。
Zenn