形を変える（Morph）
このページでは、GSAP（MorphSVG・DrawSVG）とFramer Motionを使ったSVGモーフィングアニメーションの実装パターンをインタラクティブなデモとコードで確認できます。
SVGモーフィングとは、SVGのpathデータを補間してなめらかに形状を変化させる技術。ロゴアニメーション・アイコン切り替え・インタラクティブなグラフィックなどで使われる。
GSAPのMorphSVGはパスの点数が異なる形状間でも自動補間するため、複雑な形状の変形が可能。Framer MotionはSVGのd属性アニメーションに対応しているが、点数が一致する単純な形状のみ対応。
① 図形の変形（d属性アニメーション）
※ Framer Motionはd属性の点数が一致する形状間のみ変形可能
② アイコンの変形（ハンバーガー → ×）
ハンバーガーメニュー
③ ロゴのモーフィング
⚠️ Framer Motionは複雑な形状のモーフィングに非対応
星形やハートのような複雑な形状は点数が異なるため、Framer MotionのSVGアニメーションでは対応できません。 GSAPタブのMorphSVGPluginでは点数が異なる形状間でも自動補間するため、自由に変形できます。
④ パスの描画（pathLength）
実装方法の比較
| 項目 | Framer Motion | GSAP |
|---|---|---|
| 形状変形 | d属性アニメーション対応。ただし点数が一致する形状のみ | MorphSVGが点数の異なる形状間でも自動補間 |
| 複雑な形状 | 非対応（点数不一致だと崩れる） | 自動でパスを分割・補間するため複雑な形状も対応 |
| パスの描画 | pathLengthとpathOffsetで対応 | strokeDashoffsetをアニメーションして対応 |
| アイコン変形 | 点数が一致すれば対応可能 | MorphSVGで自由に変形可能 |
| 実装コスト | 低（宣言的に書ける） | 中（MorphSVGプラグインが必要だが直感的） |
🤖 AIプロンプトテンプレート
Next.js + GSAP でSVGモーフィングアニメーションを実装してください。 - MorphSVGプラグインで図形を変形（円→四角→三角） - アイコンの変形（ハンバーガーメニュー→×ボタン） - useGSAPフックとcontextSafeを使用 - TypeScript / Tailwind CSS v4 を使用
同じカテゴリの他のページ
文字を演出する（Text Animation）| UI Memo
GSAPのSplitText・ScrambleTextで実装する文字アニメーションのサンプル。1文字ずつフェード・スライド・波・スクランブル・バラけて再集合など、テキスト演出のUIパターン実例集。
動きの質感を選ぶ（Easing）
イージングの違いを体験で比較。power・back・bounce・elasticなどGSAP・Framer Motion・CSS Transitionのeaseを一覧・比較できるUIパターン実例集。
スクロールで物語る（Scroll Storytelling）
GSAPのScrollTriggerで実装するスクロール演出のサンプル。scrub・pin・横スクロール・パララックスなど、スクロールに連動した高度なアニメーションのUIパターン実例集。デモ・コード付き。
Zenn