gsap-svg

GSAP SVG — Vue / Nuxt パターン

フロー：gsap-setup → gsap-animate → gsap-svg → gsap-optimise → gsap-test

関連項目：DrawSVG/MorphSVG API リファレンスについては、gsap-plugins を呼び出してください。このスキルでは SVG アニメーションのレシピのみを扱います。必要：greensock/gsap-skills

---

1. SVG パスの描画（strokeDashoffset）

手動の方法

const ctx = gsap.context(() => {
  const paths = containerRef.value.querySelectorAll('path')
  paths.forEach((path) => {
    const len = path.getTotalLength()
    gsap.set(path, { strokeDasharray: len, strokeDashoffset: len })
  })
  gsap.to(paths, {
    strokeDashoffset: 0, duration: 2, ease: 'power2.inOut',
    stagger: { each: 0.08, from: 'start' },
  })
}, containerRef.value)

DrawSVG プラグインを使用する方法（遅延読み込み）

await $lazyLoadDrawSVG()
gsap.from(paths, { drawSVG: '0%', duration: 2, stagger: 0.05 })
gsap.to(paths, { drawSVG: '40% 80%', duration: 1.5 }) // partial range

パスを順番にアニメーションし、その後ノードをアニメーションする

const tl = gsap.timeline()
tl.to(paths, { strokeDashoffset: 0, duration: 1.5, ease: 'power2.inOut', stagger: { each: 0.05 } })
  .from(circles, { scale: 0, autoAlpha: 0, duration: 0.6, ease: 'back.out(2)',
    stagger: { each: 0.03, from: 'random' } }, '-=0.5')

無限パルスリング

gsap.fromTo(ringEl,
  { scale: 1, autoAlpha: 0.7 },
  { scale: 2.2, autoAlpha: 0, duration: 2, ease: 'power1.out', repeat: -1, force3D: true }
)

---

2. SVG のモーフィング（MorphSVGPlugin）

const pathTo = pathEl.value.dataset.pathTo
gsap.to(pathEl.value, { attr: { d: pathTo }, duration: 1.5, ease: 'power2.inOut' })

// Scroll-driven
gsap.to(pathEl.value, {
  attr: { d: pathTo }, ease: 'none',
  scrollTrigger: { trigger: sectionRef.value, start: 'top center', end: 'bottom center', scrub: 0.5 },
})

// With MorphSVGPlugin
await $lazyLoadMorphSVG()
gsap.to(pathEl.value, { morphSVG: targetPathEl.value, duration: 1.5 })

---

3. スカラップウェーブ

gsap.from(ellipses, {
  scale: 0, autoAlpha: 0, transformOrigin: 'top center',
  duration: 0.8, ease: 'back.out(3)', force3D: true,
  stagger: { each: 0.04, from: 'center' },
  scrollTrigger: { trigger: containerRef.value, start: 'top 80%', toggleActions: 'play none none reverse' },
})

---

4. 重要な注意点

fill: transparent を使用し、fill: none は使用しない

none は「塗りなし」を意味するため、GSAP ではそこから補間できません。transparent を使用してください。

アニメーションの担当プロパティを分ける

同時に動作するタイムラインでは、異なるプロパティを担当させてください。Wave は stroke を担当します。Color は fill と autoAlpha を担当します。

タイムラインの絶対位置指定

複数レイヤーの構成では、相対オフセットではなく .add(animation, timeInSeconds) を使用してください。

SVG DOM のクリーンアップ

onUnmounted(() => {
  ctx?.revert()
  circuitWrap.value?.replaceChildren() // clear SVG DOM
})

---

参考資料

• references/svg-patterns.md — Circuit Tree の3層アニメーション、CTAHud の5層システム、動的モーフィングのシェイプオーバーレイ、補間を使ったスムーズなモーフィング