MorphSVGプラグインは、SVGの形状を滑らかに変形できる非常に強力なプラグインです。
基本的な使い方や導入方法については、過去の記事で解説しているため、今回は 「アニメーションのタイミング」 に焦点を当てて解説します。

MorphSVGは、ただパスを別の形に変えるだけでもサイトに使えます。しかしそれだけでは、SVGアニメーションとしての完成度は高くなりません。
重要なのは「どの形に変形するか」よりも、「いつ・どのスピードで変形させるか」 です。
タイミングを意識することで、SVGアニメーションは「動き」から「演出」へと変わります。

durationで「変形の印象」をコントロールする

MorphSVGでは、durationの値によって印象が大きく変わります。
例えば、次のように0.4秒で変形させると、動きが一瞬で終わるため、やや唐突な印象になります。

See the Pen
【GSAP】SVGAdvanced_No1 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

このようにdurationを意識せずに設定すると、「変形したこと」は伝わっても、動きとしての気持ちよさが感じられません。アイコンやロゴの変形では、0.6〜1.2秒前後を目安に調整すると、自然なSVGアニメーションになりやすいです。

easeを使って変形に「気持ちよさ」を加える

MorphSVGでは、イージングによって変形の質感が大きく変わります。
同じアニメーションでも、easeを変えるだけで印象が大きく変わります。

▼ease: “power4.in”

See the Pen
【GSAP】SVGAdvanced_No2 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

▼ease: “power1.inOut”

See the Pen
【GSAP】SVGAdvanced_No3 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

上記の二つはease以外はすべて同じ設定です。easeが違うだけで、アニメーションの印象が変わるのを感じられるかと思います。

• power4.in：ゆっくり動き出し、後半に向かって強く加速する変形

• power1.inOut：自然でクセのない変形

 SVGアニメーションでは、こうしたわずかな違いが「気持ちいい動き」か「少し違和感のある動き」かを分けます。まずはクセの少ない inOut系のイージングを基準に考えるのがおすすめです。

MorphSVGのアニメーションタイミング調整:まとめ

MorphSVGでは、形そのものよりも「タイミング設計」がアニメーションの印象を大きく左右します。
durationとeaseを意識して調整するだけで、SVGアニメーションは一気に洗練された表現になります。こうした細かな調整がクオリティの差につながります。

複雑なパス同士の変形は、思ったより失敗しにくい

MorphSVGプラグインを使ったパス変形は、形が違いすぎると失敗するのではないか？と思い、試してみました。
しかし実際に試してみると、アンカーポイント数や構造が異なっていても、意外と問題なく変形します。
内部でパスを自動補正するため、多少構造が違っていても自然な変形になるようです。

そのため、実務においては「事前に完璧なパスを用意する」よりも、「まずは動かしてみる」というアプローチで問題なさそうです。

See the Pen
【GSAP】SVGAdvanced_No5 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

↑このように全く違う形でも、少し違和感はあるかもしれませんがスムーズに変化しました。

MorphSVGプラグインを使うことで、SVGを変形させながら、ローディングの状態遷移を表現できます。
回り続けるだけのローダーとは異なり、完了が直感的に伝わるアニメーションを実装できる点が大きな特徴です。

ローディング中と完了を1つのSVGで表現する

基本的な考え方はシンプルです。

• ローディング中は円や線をアニメーションさせる
• 処理完了時に別の形へ変形させる
• 変形が終わったらアニメーションを停止する

この流れを1つのSVG内で完結させることで、スムーズなローディング表現を作ることができます。

See the Pen
【GSAP】SVGAdvanced_No6 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

SVGアニメーションを実務で使う場合、複数の線や図形を順番につなげて演出することがほとんどです。
こうした演出をシンプルに管理できるのが、GSAPのTimeline × DrawSVGプラグインの組み合わせです。
Timelineを使うことで、

• 複数SVGアニメーションを1つの流れとして管理できる
• アニメーションの開始タイミングを直感的に調整できる

といったメリットがあります。

手順

①DrawSVGプラグインで複数パスを順番に描画する

まずは、複数のSVGパスを用意し、それぞれのpathをDrawSVGで描画アニメーションさせていきます。

<svg viewBox="0 0 200 50" width="500" height="100" aria-hidden="true">
  <path id="line1" d="M10 25 L60 25" />
  <path id="line2" d="M80 25 L130 25" />
  <path id="line3" d="M150 25 L200 25" />
</svg>

②TimelineでSVGアニメーションを連結する

③タイミングを重ねてテンポを調整する

すべてを完全に順番再生すると、少し間延びして見えることがあります。
そんなときは、相対指定（"-=〇〇"） を使ってアニメーションのタイミングを重ねます。

See the Pen
【GSAP】SVGAdvanced_No2 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

これにより、前の線が描かれ終わる前に次の線が動き出し、リズム感のあるSVGアニメーションになります。

実務での活用シーン

この「複数SVGを連結してタイムライン化する手法」は、次のような場面でよく使われます。

• ロゴや見出しの線画アニメーション

• ファーストビューなどの目立たせたい箇所のアニメーション

• スクロール開始時のアイキャッチ演出

SVGアニメーションは派手にしすぎなくても、線が描かれるだけで視線を自然に誘導できるのが大きな強みです。

DrawSVGをタイムライン化:まとめ

• 複数SVGはTimelineでまとめて管理する

• 間延びを感じる時は、次のアニメーションを少し重ねると見やすいアニメーションになる

DrawSVGは、SVGの線を時間ではなくスクロール操作に合わせて描画させることもできます。
ScrollTriggerと組み合わせることで、ユーザーの操作に応じてアニメーションの進行度を制御できます。

ここでは、DrawSVGの進行度をスクロールに連動させる例を紹介します。

スクロール連動のDrawSVG

通常のDrawSVGは、durationを基準に線が描かれます。
ScrollTriggerを使う場合は、スクロール位置がそのまま描画の進行度になります。

時間軸ではなく、「どこまでスクロールしたか」を基準にアニメーションが進む、という点がポイントです。

実務での使いどころ

背景装飾やセクションの区切りなど、動きすぎず、操作に自然に追従させたい演出と相性が良いです。
スクロールに合わせて線が少しずつ描かれるだけでも、視線誘導や没入感をさりげなく高めることができます。

See the Pen
【GSAP】SVGAdvanced_No4 by ishi (@qwwbetnz-the-typescripter)
on CodePen.

GSAPを使ったSVGアニメーションは、単に動かすだけでなく、タイミング・連なり・状態遷移を意識することで表現の質が大きく変わります。

DrawSVGで線を描き、Timelineで流れを作り、MorphSVGで形を変える。
これらを組み合わせることで、SVGアニメーションは単なる装飾ではなく、楽しい演出にすることができます。

まずは細かく作り込もうとせず、動かしてみて「ちょっと違うな」と感じた部分を調整するところから始めても大丈夫です！
ぜひSVGアニメーションをたくさん試してみて、あなたのサイトに合ったアニメーション作成をしてみてください。

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法