カテゴリー
お問い合わせ

【GSAP】MorphSVGPluginでSVGのパスを変形させる基本的な使い方

GSAP
目次

WebサイトでSVGアイコンや図形を「別の形に変形させたい」と思ったことはありませんか？ 従来は非常に複雑な計算やパスの調整が必要でしたが、GSAPの「MorphSVGPlugin」を使えば、1行のコードでSVGシェイプを別のシェイプにモーフィングできます！

実はこのプラグイン、以前は有料ライセンス専用でしたが、2025年4月にWebflowのスポンサーにより完全無料化されました！ Webflowユーザーであるか否かにかかわらず、すべての人がGSAPのツールを無償で活用できます。 今回は、初学者でも簡単に実装できるMorphSVGPluginの基本的な使い方を、コピペで動くデモと共にご紹介します！

デモ動作

See the Pen GSAP MorphSVGPluginでSVGを変形させる by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>MorphSVGPlugin 基本デモ</h2>
  <p class="p-desc">ボタンを押すと、図形がヌルッと変形します！</p>
  
  <div class="p-demo-box">
    <!-- SVGキャンバス -->
    <svg class="svg-canvas" viewBox="0 0 200 200">
      <!-- 変化前の図形（四角形） -->
      <path id="start-shape" fill="#1bb4d4" d="M 50 50 L 150 50 L 150 150 L 50 150 Z" />
      
      <!-- 変化後の図形（星型）※非表示にしておきます -->
      <path id="end-shape" style="visibility: hidden;" d="M100 10 L120 70 L190 70 L135 110 L155 180 L100 135 L45 180 L65 110 L10 70 L80 70 Z" />
    </svg>
  </div>

  <button class="c-btn js-morph-btn">変形させる！</button>
</div>

【CSS】

.l-wrap { 
  padding: 40px 20px;
  max-width: 600px; 
  margin: 0 auto; 
  color: #3e3e3e;
  text-align: center;
}

h2 { 
  font-size: 16px;
  color: #1bb4d4;
  margin-bottom: 10px;
}

.p-desc { 
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin-bottom: 40px;
}

.p-demo-box {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

.svg-canvas{
  width: 200px;
  height: 200px;
}

.c-btn {
  padding: 16px 40px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #333;
  border-radius: 30px;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}

.c-btn:hover { 
  opacity: 0.8;
}

【JavaScript】

// プラグインの登録（忘れずに！）
gsap.registerPlugin(MorphSVGPlugin);

const btn = document.querySelector('.js-morph-btn');
const startShape = document.querySelector('#start-shape');

// 💡ポイント：初期状態のパスデータ（d属性の値）を変数に保存しておく！
const originalPath = startShape.getAttribute('d');

let isMorphed = false;

btn.addEventListener('click', () => {
  if (!isMorphed) {
    // 四角形から星型へモーフィング
    gsap.to(startShape, {
      duration: 1,
      // morphSVGプロパティに、変形先のパス（id）を指定するだけ！
      morphSVG: "#end-shape", 
      ease: "power2.inOut"
    });
  } else {
    // 星型から四角形（元の形）に戻す
    gsap.to(startShape, {
      duration: 1,
      // 初期状態のパスデータを指定する
      morphSVG: originalPath,
      ease: "power2.inOut"
    });
  }
  isMorphed = !isMorphed;
});

コードの解説・仕組み

プラグインの読み込みと登録

// プラグインの登録（忘れずに！）
gsap.registerPlugin(MorphSVGPlugin);

外部のCDNなどからGSAP本体とMorphSVGPluginを読み込んだ後、JSファイル内で gsap.registerPlugin(MorphSVGPlugin); と記述してプラグインを有効化します。

変化前と変化後のSVGパス（path）を用意する

<!-- SVGキャンバス -->
<svg class="svg-canvas" viewBox="0 0 200 200">
  <!-- 変化前の図形（四角形） -->
  <path id="start-shape" fill="#1bb4d4" d="M 50 50 L 150 50 L 150 150 L 50 150 Z" />
      
  <!-- 変化後の図形（星型）※非表示にしておきます -->
  <path id="end-shape" style="visibility: hidden;" d="M100 10 L120 70 L190 70 L135 110 L155 180 L100 135 L45 180 L65 110 L10 70 L80 70 Z" />
</svg>

変形させたい対象のパス（#start-shape）と、目標となる形のパス（#end-shape）をHTMLのSVG内に記述します。変化後のパスは画面に見えなくて良いので visibility: hidden; で隠しておきましょう。

gsap.to() に morphSVG プロパティを指定！

const startShape = document.querySelector('#start-shape');

...

// 四角形から星型へモーフィング
gsap.to(startShape, {
  duration: 1,
  // morphSVGプロパティに、変形先のパス（id）を指定するだけ！
  morphSVG: "#end-shape", 
  ease: "power2.inOut"
});

gsap.to() を使って、変形させたいパスに対して morphSVG プロパティを指定します。 モーフィングする2つのシェイプのパスのポイント数が一致していなくても大丈夫です。 MorphSVGPluginは元のパスと変形先パスの点を「順番に対応付けて補間」します。 裏側でGSAPが複雑な計算をして、最も自然な形で変形させてくれます。

もし<circle>や<rect>などのシンプルなシェイプを使っている場合でも、MorphSVGPlugin.convertToPath()関数を使うだけで、シェイプをパスに変換してモーフィングできます！

補足：公式ドキュメント

より詳しい仕様や最新の対応状況については、以下の公式ドキュメントをご参照ください。

・GSAP: MorphSVGPlugin
・GSAP: MorphSVGPlugin.convertToPath

まとめ

今回は、初学者でも簡単に実装できるMorphSVGPluginの基本的な使い方を、コピペで動くデモと共にご紹介しました！

2025年4月、Webflowのスポンサーにより、GSAPのこれまで有料だった高機能プラグインを含む全機能が完全無料化されました。 標準ライセンスが商用利用にも拡張され、どこでも安心して活用いただけます。

SVGのモーフィングは、ロゴのアニメーションや、ハンバーガーメニューが「×」に変化するUIなど、様々な場面で活躍します！

コード自体はとてもシンプルなので、ぜひ皆さんの制作物にも取り入れてみてくださいね！

Prev
Next

関連記事