Blog
Jun 10, 2025 - 8 MIN READ
Scroll-Driven SVG Path Animations

Scroll-Driven SVG Path Animations

Create performant scroll-driven SVG path animations in Nuxt using IntersectionObserver + requestAnimationFrame—no heavy libs.

Bo Cooper

Bo Cooper

SVG path animations can feel magical—if they're smooth and meaningful. We'll build a scroll-driven stroke-draw effect tied to viewport progress.

Core Technique

We set stroke-dasharray and stroke-dashoffset to the path length, then reduce the offset as the element scrolls into view.

Steps

  1. Measure path length
  2. Initialize dash values
  3. Observe scroll progress
  4. Interpolate offset
function setup(el: SVGPathElement) {
  const length = el.getTotalLength()
  el.style.strokeDasharray = String(length)
  el.style.strokeDashoffset = String(length)
  return length
}
function bindScroll(el: SVGPathElement, length: number) {
  const io = new IntersectionObserver(([entry]) => {
    if (!entry.isIntersecting) return
    const start = window.scrollY
    function frame() {
      const visible = Math.min(1, (window.scrollY - start + window.innerHeight * 0.2) / (entry.boundingClientRect.height + window.innerHeight))
      el.style.strokeDashoffset = String(length * (1 - visible))
      if (visible < 1) requestAnimationFrame(frame)
    }
    requestAnimationFrame(frame)
  }, { threshold: [0, 0.2] })
  io.observe(el)
}

Accessibility

Avoid animating purely decorative graphics as focus cues; ensure reduced motion mode disables the draw.

Wrap Up

This pattern scales: hook multiple paths, abstract into a directive, or swap progression logic for scroll timelines once widely supported.

Copyright © 2025