スクロールに連動したSVGパス描画アニメーションの作り方

2026.04.01

スクロールを進めると、SVGの曲線が徐々に描画されるアニメーションの実装方法を解説しています。GSAPを使うと意外と少ないコードで実装できます。

実装例

早速ですが以下が実装例です。

下方向にスクロールすると曲線が徐々に描画され、上方向にスクロールすると曲線が徐々に消えていくことが確認できます。

絶対配置した画像やカード要素を曲線で繋ぐことで、ユーザーの注目を集める演出が可能です。Lenis等のスムーズスクロールライブラリで実装した慣性スクロールとの相性も良いように感じます。

コードの解説

HTMLではdata-draw-stroke属性を付与したラッパーの中にSVGを配置しています。SVGの曲線はpath要素で定義しています。

1
<div data-draw-stroke>
2
  <svg fill="none" height="1979" viewBox="0 0 1317 1979" width="1317">
3
    <path d="M380 40 C50 200 900 150 600 400 C300 650 1000 700 700 950 C400 1200 50 1150 300 1400 C600 1650 1200 1500 900 1750 C650 1950 200 1850 350 1700" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
4
  </svg>
5
</div>

JavaScriptの処理

事前にGSAP本体とScrollTriggerを読み込んでいます。コードの全体像は次の通りです。

1
// 対象要素の取得
2
const triggers = document.querySelectorAll("[data-draw-stroke]");
3
const paths = document.querySelectorAll("[data-draw-stroke] svg path");
4

5
// 各要素ごとに処理
6
triggers.forEach((triggerEl, index) => {
7
  const path = paths[index];
8

9
  // パスの全長を取得
10
  const pathLength = path.getTotalLength();
11

12
  // 初期状態：線を完全に隠す
13
  gsap.set(path, {
14
    strokeDasharray: pathLength,
15
    strokeDashoffset: pathLength,
16
  });
17

18
  // ScrollTriggerで描画アニメーション
19
  ScrollTrigger.create({
20
    trigger: triggerEl,
21
    start: "top center",
22
    end: "bottom 70%",
23
    markers: false,
24
    // 進捗に応じて線を描画
25
    onUpdate: (self) => {
26
      // 0~1の値の進捗度合い
27
      const progress = self.progress;
28
      // 線を徐々に描画
29
      path.style.strokeDashoffset = pathLength * (1 - progress);
30
    },
31
  });
32
});

大きく分けて3つの処理を行なっています。

パスの全長を取得
初期状態で線を完全に隠す
スクロールの進捗度合いとパスの開始位置を同期

パスの全長を取得

path要素のgetTotalLength()メソッドを使用して、パスの全長を取得しています。

1
const pathLength = path.getTotalLength();

初期状態で線を完全に隠す

gsap.set()メソッドを使用して、初期状態で線が表示されないようにしています。

1
gsap.set(path, {
2
  strokeDasharray: pathLength,
3
  strokeDashoffset: pathLength,
4
});

strokeDasharray: 破線パターンの長さ
strokeDashoffset: パスの描画開始位置

stroke-dasharrayでパス全長の破線を作り、stroke-dashoffsetをパスの長さ分ずらすことで描画/非表示を切り替えています。SVGのパスを使用したアニメーションでよく使われるテクニックです。

両者の関係を図で表すと次のようになります（パスの全長を400pxと仮定）。

スクロールの進捗度合いとパスの開始位置を同期

スクロールの進捗度合いを取得するために、onUpdateのコールバック関数を使用しています。

1
ScrollTrigger.create({
2
  trigger: triggerEl,
3
  start: "top center",
4
  end: "bottom 70%",
5
  markers: false,
6
  onUpdate: (self) => {
7
    const progress = self.progress;
8
    path.style.strokeDashoffset = pathLength * (1 - progress);
9
  },
10
});