Trigger SVG SMIL animations on scroll with IntersectionObserver
When a spec says “when visible,” IntersectionObserver is the obvious tool — and that’s how Zach Leat approaches kicking off an SVG animation as it enters the viewport. The twist: the animation itself is a SMIL <animate>, not a CSS animation.
SMIL has a few advantages, like chaining animations to begin when another finishes — something CSS doesn’t handle gracefully. It also exposes a JavaScript API, so you can start the animation on demand while still honoring prefers-reduced-motion.
Worth noting:
.querySelectorAll(`:scope [begin="indefinite"]`);The :scope selector used there is a newer trick that’s handy for scoping queries to the element itself.
