4
Fire SVG animations (SMIL) when the SVG is visible | CSS-Tricks
source link: https://css-tricks.com/fire-svg-animations-smil-when-the-svg-is-visible/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Fire SVG animations (SMIL) when the SVG is visible
Grow sales with Customer Journey Smarts with
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK