プラグインの導入方法から解説します。
GSAPのSVGプラグインは複数あります。ここでは、「MorphSVG」を導入していきますが、他のプラグインもやり方は一緒なので、参考にしてください。
今回は2通りの導入方法をご紹介します。

1. CDN
   公式サイトから、「CDN」のタブを開き「MorphSVG」にチェックを入れます。
   コードが出てきますので、ピンクで囲ったコードをコピーして任意の場所（</body>の手前など）に貼り付けてください。
   
   GSAP自体の導入もまだであれば、水色で囲ったコードも一緒に貼り付けてください。
   この時、水色のコードが上になるよう貼り付けないとエラーになりますのでご注意ください。
2. 直接ファイルをダウンロードする
   GitHubの、dist>MorphSVGPlugin.min.jsをダウンロードします。
   ダウンロードしたファイルは任意の場所に設置してください。
   GSAP自体の導入もまだであれば、dist>gsap.min.js も一緒にダウンロード、設置してください。
   

他のプラグインも同じ手順で導入できます。

GSAPのSVGプラグインは現在4種類あります。

1. MorphSVG：SVGを別のSVGになめらかに変化させる
2. DrawSVG：SVGのストロークを段階的に表示させる
3. MotionPath：要素をパスに沿って移動させる
4. MotionPathHelper：SVGのアンカーやコントロールポイントをドラッグできる

ざっくり、各プラグインの違いはこのようになります。

特徴や使い所がそれぞれ違うので、次の章から詳しく説明していきます！
※MotionPathHelperは今回紹介しません。

MorphSVGPluginは、SVGの<path>を別の<path>になめらかに変化させるアニメーションを実現します。「四角が動物の形に変化する」「ロゴが形を変えて変身する」といった表現に最適です。

ちなみにMorph（モーフ）は「変形させる」という意味です。

特徴

• SVGパスの形を別の形状に変化
• 複雑な形でも自然な変形が可能
• シェイプポイントの数が違っていても可能

使い所

• 何らかの形からロゴに変化するアニメーション
• ボタンホバー時にアイコンの形状が変わるアニメーション

実際の動きとコード例

▼実際の動き

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

▼HTMLコード

<svg xml:space="preserve" id="svg2" x="0" y="0" version="1.1" viewBox="9 80 800 400">
<path id="item1" d="省略"></path>
<path id="item2" d="省略"></path>
</svg>

▼GSAPコード

let morph = gsap.to("#item1", {
  morphSVG: "#item2",
  duration: 1,
  repeat: -1,
  yoyo: true,
  repeatDelay: 1,
});

HTMLでは、<svg>タグの中に、変化させたい<path>を二つ記述します。
そしてそれぞれ”item1″と”item2″というidを付けましたが、このidをGSAP側で指定します。
上の例では、gsap.to("#item1"で一つ目のpathのid、morphSVG: "#item2"で二つ目のpathのidを指定しました。

id名は任意で大丈夫なので、ご自身の分かりやすいものに変えてくださいね。

DrawSVGは、SVGのストロークを段階的に表示・非表示することができます。これにより、まるで線が描かれているように見せることが可能です！特にロゴの描写などにおすすめです。

ちなみにDraw（ドロー）は「描く」という意味です。

特徴

• 線を手書き風に見せられる
• SVGロゴやパスイラストとの相性抜群

使い所

• 手書き風ロゴの描画
• ローディングアニメーション
• スクロール連動で線を描く演出

実際の動きとコード例

▼実際の動き

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

▼HTMLコード

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
  <g>
    <path class="path" d="省略"></path>
  </g>
</svg>

▼GSAPコード

gsap.from(".path", {
  duration:10,
  drawSVG: "0%",
});

HTMLでは、<path>に”path”というclassを付けました。このclassをGSAP側で指定します。class名は任意で大丈夫です。

GSAPの、drawSVG: "0%"は、SVG全体のストローク部分を表しています。ここを"10% 50%"などに変えるとアニメーションが開始される場所が変わります。

塗りつぶしはアニメーションされません。CSSのstroke-dashoffsetとstroke-dasharrayプロパティにのみ影響しますので、ご注意ください。
また、複数の<path>やもっと複雑なSVGもアニメーション可能ですが、今回は割愛いたします。

MotionPathは、SVGのパスに沿って要素を動かすことができます。円が曲線上を移動したり、車が地図上を移動するような表現に使えます。

ちなみにMotion（モーション）は「動き」「移動」という意味です。

特徴

• SVGの<path>を動作ルートとして利用できる
• ページ内の他要素（画像やdiv）を動かせる

使い所

• ローディングやスクロール中のガイド演出
• 地図上のルート移動アニメーション
• 複雑な動きのあるUIパーツ

実際の動きとコード例

▼実際の動き

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

▼HTMLコード

<svg class="svg" data-name="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375.64 115.58">
  <g>
    <path class="path" d="省略"></path>
  </g>
</svg>
<div class="ele">要素</div>

▼GSAPコード

gsap.to(".ele", {
  motionPath: {
    path: ".path",
    align: ".path",
    alignOrigin: [0.5, 0.5],
    autoRotate: true,
  },
  duration: 15, 
  repeat: -1,
  repeatDelay: 0.5,
  yoyo: true,
  transformOrigin: "50% 50%",
  duration: 5,
  ease: "power1.inOut",
});

HTMLでは、<svg>に”svg”、<path>に”path”というclassを付けました。また、動く要素には”ele”を付けました。このclassをGSAP側で指定します。class名は任意で大丈夫です。

DrawSVGを使用して、ロゴを表示させるアニメーションを作ってみました。
このプラグインが得意なのは線の描画なので、まず線の描画をさせ、後から中を塗るようなアニメーションにしてみました。

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

▼コード

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

GSAPのSVGプラグインを使用すれば、複雑なアニメーションも短いコードで実現可能です。

ぜひ、今回紹介したサンプルコードをベースに、サイトやロゴアニメーション制作に活用してみてください！

【関連記事】

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

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