Fire SVG animations (SMIL) when the SVG is visible
Publikováno: 7.9.2021
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>
…
The post Fire SVG animations (SMIL) when the SVG is visible appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
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.
Direct Link to Article — Permalink
The post Fire SVG animations (SMIL) when the SVG is visible appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.