El problema de los eventos scroll en JavaScript

Los efectos basados en scroll tradicionalmente usaban listeners de JavaScript en el hilo principal, causando jank y mala experiencia. CSS Scroll-Driven Animations mueven el tracking al compositor thread.

Conceptos clave

scroll-timeline vincula una animación a la posición de scroll. view-timeline la vincula a la visibilidad de un elemento. animation-timeline asigna una animación a un timeline.

Scroll Progress Timelines

.progress-bar { animation: fill-progress linear; animation-timeline: scroll(); }

La función scroll() crea un timeline anónimo en el contenedor de scroll más cercano.

View Progress Timelines

.reveal { animation: fade-in linear; animation-timeline: view(); animation-range: entry 0% cover 50%; }

Controla cuándo empieza y termina la animación con animation-range.

Ejemplos prácticos

Indicador de progreso de lectura, parallax CSS puro sin JavaScript, y animaciones de entrada basadas en visibilidad.

Soporte

Chrome 115+, Safari 17.2+ (tras bandera), Firefox 121+ (parcial). Usa @supports para mejora progresiva.