【GSAP】MotionPathのalignと座標系を理解してSVGの曲線に沿って動かす

情報確認日：2026年10月15日。GSAP 3系の公式資料を確認して作成した、本サイト独自の実装例です。

SVGのパスに沿ってマーカーを動かします。pathとalignの違い、alignOrigin、autoRotate、viewBox、画面幅が変わるときの再計算を説明します。

直線移動では伝えにくい流れを表す

MotionPathPluginは、SVGのパスなどに沿って要素を動かすためのプラグインです。地図の経路や工程の流れを表現したい場合に候補になります。この例は一つのSVG内に曲線とマーカーを置き、ボタンを押したら左から右へ移動させます。

経路の動き自体が説明のすべてにならないよう、短い文章も付けています。実際の地理情報や正確な到達時刻を表すデータ可視化ではありません。業務の進捗を見せるなら、実際の状態を別のデータから得る必要があります。一定時間のTweenだけで処理完了を表現しないでください。

SVGのviewBoxは内部の座標の基準

viewBox="0 0 600 240"は、SVG内部の座標範囲を表します。CSSで幅を100%にしても、パスの数値がそのまま画面上のCSSピクセルになるわけではありません。SVG要素とHTML要素を混在させると、座標系の変換を意識する必要があります。

最初のサンプルでは、経路とマーカーを同じSVGへ置いて、要素間の関係を単純にしています。HTMLのアイコンをSVGへ重ねる実装に進む前に、内部だけで位置と向きが合うかを確認すると、ずれの原因を絞りやすくなります。

pathは経路、alignは位置合わせ

motionPathのpathへ#routeを指定し、動く経路を決めます。alignにも同じパスを指定して、マーカーが経路に位置合わせされるようにしています。これらは似た文字列になりますが、どちらも同じ役割というわけではありません。

alignOrigin: [0.5, 0.5]は、動かす要素の中心を合わせたい場合の指定です。画像や複雑なSVGでは、見た目の重心と要素の矩形の中心が一致しないこともあります。余白を含む素材なら、まずSVGや画像側の余白を確認し、それから位置合わせを調整してください。

autoRotateは元の絵の向きにも影響される

autoRotate: trueにすると、進む方向に合わせてマーカーを回転させられます。今回の三角形は最初から右向きに作っています。上を向いている素材へ同じ指定をすると、経路には沿っていても、見た目が横向きになる場合があります。

その場合は元の素材の向きを直すか、角度の補正が必要かを検討します。alignのずれと、回転角のずれを同時に直そうとしないことが大切です。まず位置、次に向き、最後に時間の変化を確認すると、設定の意味を追いやすくなります。

ease: "none"でも、業務上の一定速度を保証しない

この例は進行の変化を一定にするためeaseをnoneにしています。見た目をゆっくり発進させたいなら別のeaseを選べます。ただし、画面上の動きはパス、座標変換、描画条件にも関わるため、物理的な速度や現実の移動時間を保証するものではありません。

繰り返しを無限にすることもできますが、利用者が文章を読む間ずっと大きく動く必要があるか考えます。今回は自動ループにせず、再生ボタンから開始する形にしました。動きを減らす設定では、静止した到着点へ切り替えるだけにしています。

リサイズ時のalignを自動追従だと思わない

公式資料は、alignの計算がアニメーション開始時に行われ、常に再計算されるものではないと説明しています。この例では、サイズ変更が落ち着いた後にTweenを作り直して、最後の位置を表示します。再生中の進行度を保持する高度な処理は入れていません。

途中の進行を維持したいなら、作り直す前にprogressを保存し、新しいTweenへ反映する方法が候補です。毎回のresizeで全アニメーションを新規生成すると負荷やちらつきにつながるため、タイミングと対象を限定してください。

ページを破棄する場合の後片付け

サンプルのresizeイベントは通常の一枚のページを前提にしています。SPAの部品として使うなら、イベントを名前付き関数へ変え、破棄時にremoveEventListener、clearTimeout、Tweenのrevertを行う関数を用意します。Tweenの停止だけでタイマーやイベントが消えるわけではありません。

公開前は、経路の最初と最後、小さな幅、縦横切り替え、何度も再生した場合を確認します。見た目の説明に使う場合でも、色だけに頼らず、方向や段階を文章で補います。SVGの経路を正しく表示することと、伝えたい情報を理解できることを合わせて点検しましょう。

実装例：HTML・CSS・JavaScript

以下は独立したデモ用のコードです。既存のViteなど、npmパッケージを解決できる開発環境で npm install gsap を実行し、HTMLをbody内、CSSをスタイルシート、JavaScriptをmain.jsへ配置してください。main.jsはHTMLの末尾からtype="module"で読み込みます。WordPressの記事本文へそのまま実行用スクリプトを貼る例ではありません。

<div class="route-demo">
  <svg viewBox="0 0 600 240" role="img" aria-labelledby="route-title">
    <title id="route-title">曲線の経路を進むマーカーのデモ</title>
    <path id="route" d="M40,180 C160,20 400,20 560,180" fill="none"
      stroke="#9d95ff" stroke-width="6" />
    <path id="marker" d="M-12,-8 L14,0 L-12,8 Z" fill="#0ae448" />
  </svg>
  <button id="run" type="button">経路を再生</button>
  <p>左端から右端へ、曲線に沿って進みます。</p>
</div>

.route-demo { max-width:50rem; margin:3rem auto; padding:1rem; }
.route-demo svg { display:block; width:100%; height:auto; overflow:visible; background:#0e100f; }
.route-demo button { margin-top:1rem; padding:.7rem 1rem; }

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";
gsap.registerPlugin(MotionPathPlugin);
const marker = document.querySelector("#marker");
let tween;
function build() {
  tween?.revert();
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  tween = gsap.to(marker, {
    paused: true, duration: reduce ? 0 : 2.4, ease: "none",
    motionPath: { path: "#route", align: "#route", alignOrigin: [0.5, 0.5], autoRotate: true }
  });
  tween.progress(1).pause();
}
build();
document.querySelector("#run").addEventListener("click", () => {
  build();
  tween.restart();
});
let resizeTimer;
window.addEventListener("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(build, 150);
});

サンプルを確認するときの条件

APIの使い方は公式資料と照合しています。掲載コードはGSAP 3.15.0とDOMを模した環境で読み込み・操作を確認しましたが、実ブラウザーでの見た目、タッチ操作、描画性能を保証するものではありません。採用前に対象ブラウザーと実機で確認してください。JavaScriptを無効にした状態でも、必要な内容と操作が残るかを確認します。

参考資料

• GSAP公式：MotionPathPlugin
• GSAP公式：Timelineのrevertなど
• GSAP公式：アイキャッチに使用したブランドアセット