CSS acaba de matar a Intersection Observer 🤯🚀
Llevamos años dependiendo de JavaScript para crear efectos de 'fade-in' o animaciones que se activan al hacer scroll. El problema es el mismo de siempre: añadir boilerplate de JS, gestionar observers y lidiar con el im
Artículo
Una lectura sobre tecnología y sistemas digitales, escrita para ir al punto y dejar claras las ideas principales.
Tema principal
desarrollo frontend
Fuente
dev.to
Puntos clave
- Llevamos años dependiendo de JavaScript para crear efectos de 'fade-in' o animaciones que se activan al hacer scroll.
- El problema es el mismo de siempre: añadir boilerplate de JS, gestionar observers y lidiar con el impacto en el rendimiento solo para disparar una clase de CSS.
- La clave ha cambiado. Chrome 146 introduce las Scroll-Triggered Animations.
- No confundir con las scroll-driven animations (que dependen del progreso del scroll). Aquí hablamos de animaciones con duración fija que se disparan nativamente cuando un elemento entra en el viewport.
Bloque 1
Llevamos años dependiendo de JavaScript para crear efectos de 'fade-in' o animaciones que se activan al hacer scroll.
El problema es el mismo de siempre: añadir boilerplate de JS, gestionar observers y lidiar con el impacto en el rendimiento solo para disparar una clase de CSS.
Bloque 2
La clave ha cambiado. Chrome 146 introduce las Scroll-Triggered Animations.
No confundir con las scroll-driven animations (que dependen del progreso del scroll). Aquí hablamos de animaciones con duración fija que se disparan nativamente cuando un elemento entra en el viewport.
Bloque 3
Lo que necesitas saber desde la perspectiva de arquitectura:
• timeline-trigger: view() sustituye la lógica de detección de visibilidad de JS por una declaración nativa de CSS. • Control total del flujo: con animation-trigger puedes definir si la animación ocurre una sola vez (play-once), se reinicia (play-forwards) o se revierte (play-backwards). • Desacoplamiento real: la condición del trigger está separada de la acción de la animación, lo que facilita la creación de Design Systems escalables. • Precisión quirúrgica: mediante Timeline Ranges (entry 100% exit 0%) defines exactamente en qué punto del scroll comienza la magia.
Bloque 4
Es una implementación compleja y la curva de aprendizaje es real, pero eliminar la dependencia de JS para interacciones visuales básicas es un salto masivo en performance y mantenibilidad.
¿Creen que esto hará que las librerías de animación basadas en JS queden obsoletas o seguirá siendo necesaria la flexibilidad del código?