アニメーション
Framer Motion・React Spring・GSAP・CSS Animationで実装するアニメーションパターンの比較サンプル集
このページでわかること
- 表示・遷移・スクロール・物理・モーフ・シーケンスなど、目的別の10種類のアニメーションパターンの違いと使い分け
- Framer Motion・GSAP・React Spring・CSS アニメーションの実装比較
- トリガー（スクロール・ホバー・状態変化）と表現（イージング・物理・モーフ）による選定基準
- パフォーマンス・prefers-reduced-motion・SSR の実装ポイント
アニメーションUIとは
アニメーションは、UIの状態変化を「動き」で表現することで、ユーザーの認知負荷を下げ、操作の結果や階層関係を直感的に伝える。単なる装飾ではなく、状態遷移の理解・注意誘導・体験の質を左右する機能要素。
Reactエコシステムでは Framer Motion（宣言的・物理ベース）、GSAP（高機能・ScrollTrigger 等のプラグイン豊富）、React Spring（バネ物理学ベース）、CSS アニメーション（最軽量）など多様な選択肢がある。表現の要求度とパフォーマンスのバランスで選び分ける。
本ページでは、代表的なアニメーションパターンを取り上げ、ライブラリごとの実装と特性を比較する。
目的別の選び方
パターン別
| パターン | 用途 | 推奨ライブラリ |
|---|---|---|
| 表示/非表示（show-hide） | モーダル・ドロワー出現 | Framer Motion |
| 遷移（transition） | ページ・要素切替 | Framer Motion / CSS |
| 注意喚起（attention） | エラー強調・新着表示 | CSS / Framer Motion |
| スクロール連動（scroll） | パララックス・進捗 | GSAP ScrollTrigger / Framer Motion |
| ストーリーテリング | LP の章立て進行 | GSAP ScrollTrigger |
| 物理（physics） | ドラッグ・バウンド | Framer Motion / React Spring |
| イージング（easing） | カスタムカーブ | GSAP / Framer Motion |
| シーケンス（sequence） | 連続アニメ | GSAP Timeline / Framer Motion |
| モーション（motion） | 自然な動き | Framer Motion / React Spring |
| モーフ（morph） | SVG形状変化 | GSAP MorphSVG |
ライブラリ選定
| 条件 | 推奨 |
|---|---|
| React的な宣言で書きたい | Framer Motion |
| 複雑なタイムライン・SVG変形 | GSAP |
| 自然な物理感を最優先 | React Spring |
| バンドルサイズ最小 | CSS アニメーション |
見せる・隠す（Show / Hide）
詳細を見る →フェード・スライド・トグルアニメーションをFramer MotionとCSS Transitionで実装・比較
目を引く（Attention）
詳細を見る →バウンス・シェイク・パルス・点滅アニメーションをFramer MotionとCSS Animationで実装・比較
要素の切り替え（Transition）
詳細を見る →フェード・スライド・スケールなどのコンテンツ切り替えアニメーションをFramer MotionとCSS Transitionで実装・比較
重さと弾み（Physics）
詳細を見る →スプリング・慣性・イージングを使った重さと弾みのアニメーションをFramer MotionとReact SpringとGSAPで実装・比較
スクロールで物語る（Scroll Storytelling）
詳細を見る →scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なGSAP演出のUIパターン実例集。
スクロールで
物語る。
動きの質感を選ぶ（Easing）
詳細を見る →同じ動きでもイージングが違うと印象がこんなに変わる。power・back・bounce・elasticなどのeaseを体験・比較。
文字を演出する（Text Animation）
詳細を見る →SplitText・ScrambleTextで実装する文字アニメーション。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合。
順番に動かす（Sequence）
詳細を見る →stagger・タイムライン制御・ローディングシーケンスなど、複数要素を順番にアニメーションさせるUIパターン実例集。
スクロールで見せる（Scroll Reveal）
詳細を見る →スクロールに連動して要素をアニメーションさせる実装をFramer MotionとIntersection Observer APIで比較
形を変える（Morph）
詳細を見る →SVGの形状をなめらかに変形させるアニメーション。MorphSVGで図形変形・アイコン変形・パスの描画を実装。
動かす・止める（Motion）
詳細を見る →ドラッグ・マウス追従・経路アニメーション・回転など、インタラクティブな動きのUIパターン実例集。
実装の落とし穴
- prefers-reduced-motion対応: 一部ユーザーは「動きの少ない設定」を有効にしている。
@media (prefers-reduced-motion: reduce)で動きを抑制 or 即時表示にする - パフォーマンス:
transformとopacity以外のプロパティ（width / height / left）はGPU加速されにくく重い。will-changeを必要箇所のみに使う - SSR対応: Framer Motion は SSR 対応だが、初期レンダリングで
initial状態がフラッシュすることがある。Animation Presence など使う場合は SSR 挙動を確認 - GSAP のライセンス: 標準は無償だが、SplitText・MorphSVG など一部プラグインは有償（GSAP公式の club会員）。商用利用前に確認
- Scroll系の暴発: ScrollTrigger をモバイルで使うと iOS Safari のスクロール処理と競合することがある。
scroller-start・fastScrollEnd等で調整
よくある質問
Framer Motion と GSAP の使い分けは？
Reactコンポーネント内でPropsで宣言的に書けるのが Framer Motion。タイムライン・複雑なシーケンス・SVG変形が必要なら GSAP。両方使うプロジェクトもあり、用途で住み分ける。
React Spring の使いどころは？
バネ物理学による「自然な動き」が必要なときに有利。ドラッグ＆ドロップ、カードフリップ、リストの並べ替えなど物理感が体験を左右する場面で選ばれる。学習コストはやや高め。
CSSだけでどこまでできる？
表示/非表示、ホバー、シンプルな遷移、キーフレームによるループアニメは CSS で十分。状態に応じた複雑な制御、物理ベースの動き、スクロール連動などはライブラリの方が早い。
アニメーションを入れると遅くなる
transform と opacity 以外の変化は GPU 合成にならず重い。will-change: transform をアニメーション要素のみに付ける、大量要素なら個別アニメより親要素の transform を使う、requestAnimationFrame 内で複数変更を統合する、などが対策。
Zenn