gsap-vfx

GSAP VFX — ビジュアルエフェクト

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

関連スキル：基本的なトゥイーン／タイムライン API については、gsap-core と gsap-timeline を呼び出してください。このスキルではビジュアルエフェクトのレシピのみを扱います。必要条件：greensock/gsap-skills

---

1. グリッチエフェクト

クロマティックアベレーション、スクランブル、ジッター、ノイズバーを備えた、1 秒ごとに 4 秒間隔で発生するサイバーパンク風のグリッチシステムです。完全な実装については、references/glitch-effect.md を参照してください。

---

2. マーキーループ（無限スクロール）

<div ref="marqueeRef" class="overflow-hidden">
  <div ref="trackRef" class="flex whitespace-nowrap">
    <span v-for="item in [...items, ...items]" :key="item.id">{{ item.text }}</span>
  </div>
</div>

const trackWidth = trackRef.value.scrollWidth / 2
gsap.to(trackRef.value, { x: -trackWidth, duration: 20, repeat: -1, ease: 'none', force3D: true })

// Reverse: gsap.fromTo(track, { x: -trackWidth }, { x: 0, ... })
// Speed-based: duration = trackWidth / pixelsPerSecond

ease: 'none' は重要です。イージングを指定すると、ループの継ぎ目で目に見えるカクつきが発生します。

---

3. 数値カウンター

プロキシオブジェクトのパターンです。GSAP がプレーンオブジェクトをアニメーションし、onUpdate で DOM に値を書き込みます。

function animateCounter(el, target) {
  const proxy = { value: 0 }
  gsap.to(proxy, {
    value: target, duration: 2.2, ease: 'power2.out',
    snap: { value: 1 },
    onUpdate() { el.textContent = String(Math.round(proxy.value)) },
    scrollTrigger: { trigger: el, start: 'top 85%', once: true },
  })
}
counterRefs.value.forEach(el => animateCounter(el, parseInt(el.dataset.target, 10)))

• snap: { value: 1 } は整数に丸めます（小数のちらつきを防止）
• once: true は、スクロールで初めて表示範囲に入ったときだけ実行されます

---

4. 浮遊する装飾

gsap.to(decorations, {
  y: 'random(-18, 18)', rotation: 'random(-12, 12)', duration: 'random(3, 5)',
  ease: 'sine.inOut', force3D: true,
  repeat: -1, yoyo: true, repeatRefresh: true,
  stagger: { each: 0.4, repeat: -1, yoyo: true },
})

• repeatRefresh: true は、サイクルごとにランダム値を再生成します

---

5. パルスリング

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

// Multiple staggered rings
rings.forEach((ring, i) => {
  gsap.fromTo(ring,
    { scale: 1, autoAlpha: 0.7 },
    { scale: 2.2, autoAlpha: 0, duration: 1.5, repeat: -1, delay: i * 0.5, force3D: true }
  )
})

---

6. 方向付きマーキー（Observer）

公式 GSAP horizontalLoop ヘルパーと Observer プラグインを使用する高度なマーキーです。スクロール／スワイプに応じて方向と速度が変化します。上記の基本的なマーキーが一方向にのみスクロールするのとは異なります。

gsap.registerPlugin(Observer)
const tl = horizontalLoop(gsap.utils.toArray('.rail h4'), { repeat: -1, paddingRight: 30 })

Observer.create({
  onChangeY(self) {
    let factor = self.deltaY < 0 ? -2.5 : 2.5
    gsap.timeline({ defaults: { ease: 'none' } })
      .to(tl, { timeScale: factor * 2.5, duration: 0.2, overwrite: true })
      .to(tl, { timeScale: factor / 2.5, duration: 1 }, '+=0.3')
  }
})

horizontalLoop ヘルパーの完全版と Vue 3 への適用例については、references/vfx-patterns.md を参照してください。

---

7. フッターのバウンス（MorphSVG + ScrollTrigger の速度）

フッターの表示時に、SVG パスが湾曲した膨らみから平坦な形状へとモーフィングします。スクロール速度に応じて弾性バウンスの強さが変わります。

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin)
const down   = 'M0-0.3C0-0.3,464,156,1139,156S2278-0.3,2278-0.3V683H0V-0.3z'
const center = 'M0-0.3C0-0.3,464,0,1139,0s1139-0.3,1139-0.3V683H0V-0.3z'

ScrollTrigger.create({
  trigger: '.footer', start: 'top bottom',
  onEnter: self => {
    const variation = self.getVelocity() / 10000
    gsap.fromTo('#bouncy-path',
      { morphSVG: down },
      { duration: 2, morphSVG: center, ease: `elastic.out(${1 + variation}, ${1 - variation})`, overwrite: true }
    )
  }
})

マークアップ、CSS、Vue 3 への適用例の全容については、references/vfx-patterns.md を参照してください。

---

8. 繰り返しタイムラインのパターン

repeat、repeatDelay、yoyo、position パラメーターのリファレンスについては、gsap-timeline スキルを参照してください。

const master = gsap.timeline({ repeat: -1, repeatDelay: 4 })
master.add(glitchBurst, 0)
master.add(rgbFlash, 0)
master.set([el, red], { clearProps: 'all' }, 0.9)

---

避けるべきパターン

// BAD: marquee with easing — stutter at loop seam
gsap.to(track, { x: -width, repeat: -1, ease: 'power1.inOut' })

// BAD: counter without snap — flickering decimals
gsap.to(proxy, { value: 100, onUpdate() { el.textContent = proxy.value } })

// BAD: no repeatRefresh — same "random" value every cycle
gsap.to(el, { x: 'random(-50, 50)', repeat: -1, yoyo: true })

// BAD: permanent will-change on glitch layers
// BAD: glitch without height lock — CLS on every burst
// BAD: setInterval instead of repeat: -1

---

参考資料

• references/glitch-effect.md — グリッチの完全な実装：RGB の変位、スクランブル、ジッター、ノイズバー、GPU のライフサイクル
• references/vfx-patterns.md — 方向付きマーキー（Observer + horizontalLoop ヘルパー）とフッターのバウンス（MorphSVG + ScrollTrigger の速度）