When requirements read “when visible” your brain should go straight to IntersectionObserver
. That’s exactly what Zach is doing here to kick off an animation when it scrolls into view.
Except this animation is an SVG SMIL animation: an <animate>
situation. SMIL animations have some kinda cool things they can do, like begin when another animation ends, which is something CSS doesn’t help with that much. Turns out SMIL has a JavaScript API as well, so it’s possible to kick off the animation on demand that way, while also respecting prefers-reduced-motion
.
Also check this out:
.querySelectorAll(`:scope [begin="indefinite"]`);
That :scope
thing is new to me.
Is SMIL not dead/dying anymore? According to this CSS-Tricks article from 2015, it was dying because support was waning in WebKit and wasn’t going to get much support at all from IE/Edge at the time. Is that still the case? Obviously a lot has changed about Edge since then.
It was even more dire for a while, as Chrome hinted about literally ripping it out. But I don’t think that’s the case anymore (although I have nothing to cite) and now Edge has it because of Chromium, so maybe it’s just here to stay.