Cuando los requisitos se leen “cuando sea visible”, su cerebro debe ir directamente a IntersectionObserver. Eso es exactamente lo que Zach está haciendo aquí para iniciar una animación cuando se desplaza a la vista.
Excepto que esta animación es una animación SVG SMIL: una <animate> situación. Las animaciones SMIL tienen algunas cosas interesantes que pueden hacer, como comenzar cuando termina otra animación, que es algo con lo que CSS no ayuda mucho. Resulta que SMIL también tiene una API de JavaScript, por lo que es posible iniciar la animación a pedido de esa manera, respetando al mismo tiempo prefers-reduced-motion.
También mira esto:
.querySelectorAll(`:scope [begin="indefinite"]`);Ese :scope la cosa es nueva para mi.
Enlace directo →