【GSAP】DrawSVGで線が描かれる演出を作る方法

情報確認日：2026年10月16日。GSAP公式資料を参照した、本サイト独自の実装例です。

SVGの線を少しずつ表示するDrawSVGPluginを解説します。drawSVGの二つの値、塗りと線の違い、複数のパス、再生と復元、レスポンシブ時の注意点を扱います。

図形を動かすのではなく、線の見える範囲を動かす

DrawSVGPluginは、SVGのストロークの表示区間を変えるためのプラグインです。パス自体を右へ移動させる処理や、図形の形を変える処理とは役割が違います。同じ位置にある線が、少しずつ描かれていく表現を作れます。

今回のデモは、五つの点を結ぶ一本の折れ線です。全体が分かる薄いガイドを残し、その上の色付きの線だけを動かします。最初から線の全体を表示するCSSにしているので、JavaScriptが動かない場合にも形を確認できます。

drawSVGの二つの値は、時間の始点と終点ではない

drawSVG: "20% 80%"は、パスの20%から80%の区間を見せるという意味です。アニメーションが20%進んだ時点で始まり、80%で終わる指定ではありません。Tweenのdurationと、線の表示区間は別の設定として読み分けます。

始点から描くなら、表示区間がない0% 0%から、全体の0% 100%へ変えます。中央から広げるなら、50% 50%を開始状態にします。同じ到着点でも開始側を変えるだけで、目線を導く方向が変わります。

fillとstrokeを分けて確認する

SVGに塗りだけがあり、strokeが設定されていなければ、線の描画を制御しても意図した見た目にはなりません。サンプルはfill: noneにし、strokeとstroke-widthを明示しています。黒い面が残る場合は、まず元のSVGの塗りと線を確認してください。

閉じたアイコン全体を、手書きのような一本の動きへ自動変換する機能でもありません。塗りつぶされたロゴをそのまま渡しても、筆順は作られません。表現したい線の構造に合わせて、素材側を設計する必要があります。

パスの順序が、描かれる順序になる

一本のパスがどこから始まり、どの方向へ進むかで、描画の印象が変わります。デザインツールから書き出したデータは、目で見た順序と内部のパス順が異なることがあります。数値を調整する前に、始点と終点、閉じているかを確認すると切り分けやすくなります。

複数の離れた線を一つのpathへ詰め込むと、途中で別の場所へ飛ぶ表現になることがあります。公式資料も、複数のM命令を含むパスの扱いに注意を促しています。別々の線としてタイミングを変えたいなら、独立したpathへ分ける構成を検討します。

複数の線はTimelineで意味の順序を作る

例えば輪郭、補助線、強調線を別のpathとして用意すれば、Timelineへ順番に追加できます。全要素を同じstaggerで動かすより、説明として重要な順序を指定しやすくなります。一方、装飾として同じ性質の線を並べるならstaggerも候補です。

これは線の順序の問題であり、データが正しいことを保証する機能ではありません。実際の売上や進捗を表す場合は、数値やラベルを先に正しく表示し、動きを見なくても意味が分かるようにします。今回の折れ線は装飾であることを文章でも明示しています。

再生と復元を別々の操作として用意する

デモは再生前に直前のTweenをrevertし、線全体が見える元の状態へ戻してから、新しいfromToを作ります。連打で複数のTweenが同じstrokeを同時に書き換えることを避けています。途中の状態を滑らかに引き継ぐ実装ではなく、同じ開始点から再現するための構成です。

全体を表示するボタンも同じ復元処理を使います。見せたい完成状態がCSSで成立していれば、Tweenが加えた状態を戻すだけで基本表示へ戻れます。独自のstroke-dasharrayをCSSにも設定する場合は、その元の状態が本当に全体表示なのかを確認してください。

liveは、必要な再計算があるときだけ使う

公式資料には、パスの長さ自体が変わる特殊な場合に、値へliveを付けて毎tick再計算する方法が示されています。単にレスポンシブなページだからといって、すべての線へ無条件に付ける必要はありません。まず何が変化しているのかを確認します。

この例は固定のviewBoxとパスデータを使い、CSSでSVG全体の表示幅を調整しています。パスを動的に書き換える場合や、線の長さの前提が変わる構成へ変更する場合は、初期値の再計算と処理量を確認します。更新のたびに描画を最初からやり直す必要があるかも、用途に合わせて判断します。

小さな線でも、描画負荷と操作を点検する

複雑な素材や太い影、フィルターを組み合わせると、Tweenの数が少なくても描画が重くなる場合があります。最初は単純な一本で確認し、素材を追加するごとに負荷を見ます。SVGだからあらゆる大きさで軽いとは言い切れません。

reduced motionでは、描く処理へ進まず全体表示のままにします。採用前には、始点からの再生、中央からの再生、連打、途中での復元、狭い幅を確認してください。線の演出は視線の補助として使い、読み取りたい内容を長く隠さないことを基準にすると、実務でも扱いやすくなります。

実装例と配置するファイル

npmパッケージを解決できる既存のViteなどの環境で npm install gsap を実行してください。HTMLはbody内、CSSはスタイルシート、JavaScriptはmain.jsへ置き、body末尾からtype="module"でmain.jsを読み込みます。WordPress本文でコードを実行する例ではなく、開発環境で動かすためのサンプルです。

<section class="drawing">
  <h1>線で、流れを見せる</h1>
  <svg viewBox="0 0 420 190" role="img" aria-labelledby="drawing-title">
    <title id="drawing-title">折れ線を順に描く装飾のデモ</title>
    <path class="guide" d="M30,150 L120,70 L210,120 L300,40 L390,90" />
    <path id="ink" d="M30,150 L120,70 L210,120 L300,40 L390,90" />
  </svg>
  <button id="draw" type="button">始点から描く</button>
  <button id="center" type="button">中央から描く</button>
  <button id="reset" type="button">全体を表示</button>
  <p>この線はデータや実際の進捗を表すグラフではありません。</p>
</section>

.drawing { max-width:42rem; padding:1rem; margin:3rem auto; }
.drawing svg { display:block; width:100%; height:auto; }
.drawing path { fill:none; stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.guide { stroke:#d7d7d7; }
#ink { stroke:#5125bb; }
.drawing button { margin:.3rem; padding:.7rem; }

import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);
const ink = document.querySelector("#ink");
let tween;
function restore() {
  tween?.revert();
  tween = null;
}
function draw(fromCenter = false) {
  restore();
  if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
  tween = gsap.fromTo(ink,
    { drawSVG: fromCenter ? "50% 50%" : "0% 0%" },
    { drawSVG: "0% 100%", duration: 1.5, ease: "none" }
  );
}
document.querySelector("#draw").addEventListener("click", () => draw(false));
document.querySelector("#center").addEventListener("click", () => draw(true));
document.querySelector("#reset").addEventListener("click", restore);

公開前の確認

掲載コードはGSAP 3.15.0を用いたDOM模擬環境で初期化と主要操作を確認しています。実ブラウザーの描画、フォントの改行、タッチの挙動、支援技術による読み上げは別途確認が必要です。開発用の環境だけでなく、対象端末と本番用ビルドで、初期表示・連打・停止・画面の再表示を確認してください。

参考資料

• GSAP公式：DrawSVGPlugin
• GSAP公式：Timeline