¿Afectan al rendimiento las animaciones al hacer scroll?
Compara el impacto de animaciones al desplazarse: oyentes de scroll frente a IntersectionObserver y la API de Scroll-Driven Animations en Core Web Vitals.
Idea clave
Las animaciones tradicionales con window.addEventListener('scroll') degradan gravemente el rendimiento al ejecutar código síncrono en cada píxel y bloquear la entrada del usuario. En cambio, tecnologías modernas como CSS Scroll-Driven Animations e IntersectionObserver se ejecutan fuera del hilo principal o por lotes, ofreciendo 60 FPS sin empeorar la métrica Interaction to Next Paint (INP).
El cuello de botella de los eventos de scroll
Consultar getBoundingClientRect() o pageYOffset dentro de un evento de scroll provoca recálculos síncronos de diseño en cada ciclo. Al desplazarse rápido en un móvil, el hilo principal se satura, generando saltos y reprobando la métrica INP de Core Web Vitals.
IntersectionObserver para revelados de entrada
Para elementos que se animan al entrar en la pantalla, IntersectionObserver es la solución ideal. Calcula la visibilidad de manera asíncrona en el compositor sin disparar funciones síncronas en cada píxel de desplazamiento.
- Nunca leas getBoundingClientRect() dentro de un listener de scroll
- Usa IntersectionObserver con rootMargin para revelados anticipados
- Aprovecha CSS Scroll-Driven Animations para vincular progreso sin JavaScript
- Asegura siempre passive: true en oyentes de scroll residuales
CSS Scroll-Driven Animations (@scroll-timeline)
Los navegadores modernos soportan funciones CSS como scroll() y view(). Esto permite vincular animaciones de keyframes directamente al desplazamiento en el hilo compositor sin ejecutar ni una sola línea de JavaScript durante el scroll.
Accesibilidad y seguridad vestibular
Grandes fondos con efecto paralaje o escalados continuos pueden causar náuseas y mareos en personas con trastornos vestibulares. Desactiva siempre el paralaje bajo prefers-reduced-motion.
Principios clave para recordar
- Nunca vincules lecturas de diseño síncronas a eventos de scroll directos
- Usa IntersectionObserver para activar revelados de forma eficiente
- Adopta CSS Scroll-Driven Animations para ejecutar efectos fuera del hilo principal
- Suprime efectos de paralaje cuando se solicite movimiento reducido
Preguntas frecuentes
Fuentes
- Scroll-driven animations specification — W3C
- Optimize Interaction to Next Paint (INP) — Google Web.dev