CodeForge

Maquetación Web Dinámica / Animaciones CSS: de sencillas a profesionales

Scroll-driven animations: el scroll como línea de tiempo

Teoría20 min20 XP

Hasta ahora todas tus animaciones corren contra el reloj: arrancan, duran sus milisegundos, terminan. Esta lección cambia el motor: la animación avanza y RETROCEDE con el scroll del usuario — barra de progreso de lectura, imágenes que se revelan al entrar en pantalla — y lo que hasta 2023 exigía JavaScript y eventos de scroll, hoy son dos propiedades CSS.

El tiempo ya no es tiempo

scroll(): la barra de progreso de lectura

El ejemplo canónico — la barrita que mide cuánto llevas leído — son seis líneas:

progreso.css

Tres detalles donde se junta TODO el curso: crece con scaleX y no con width (regla de oro), desde la izquierda gracias a transform-origin (módulo 10), y con curva linear — obligatoria aquí conceptualmente: el progreso debe ser proporcional al scroll, sin "frenados" artificiales. scroll(root) significa "la manivela es el scroll del documento"; con scroll(nearest) sería la del ancestro con scroll más cercano.

view(): reaccionar a ENTRAR en pantalla

scroll() mide el scroll global; view() mide algo más útil aún: la posición DEL PROPIO ELEMENTO dentro del viewport. La animación corre mientras el elemento cruza la pantalla — el famoso "reveal on scroll":

reveal.css

Sin animation-range, la animación se repartiría por TODO el trayecto (el elemento no terminaría de aparecer hasta salir por arriba). El rango la concentra donde tiene sentido: entry 0% (asoma el borde inferior) hasta cover 40% (lleva recorrido el 40% del viewport) — aparece completo apenas está bien visible, como esperas de un reveal. Y de regalo sobre la versión JavaScript: al hacer scroll inverso, el efecto se deshace solo.

Tu reveal con view() funciona, pero las imágenes terminan de aparecer justo cuando ya van saliendo por el borde superior — el usuario nunca las ve completas dentro de pantalla. ¿Qué falta?

Soporte: la nota honesta completa

Hablemos claro, porque esta es la API más nueva del curso: animation-timeline funciona en Chrome y Edge desde 2023, y en el resto de navegadores está en camino (Safari lo tiene en versiones recientes; Firefox aún detrás de bandera al escribir esto — verifica en caniuse.com/css-scroll-timeline, que para eso te entrenó el módulo 1). ¿Eso lo hace inusable? No — lo hace candidato PERFECTO a mejora progresiva, y ese es el patrón profesional:

  1. La página debe funcionar y verse completa SIN la animación (donde no hay soporte, la barra simplemente no aparece llena o el elemento se ve estático y visible — nunca contenido oculto).
  2. Cuidado mortal: si tu reveal parte de opacity: 0 EN LA REGLA BASE del elemento, en Firefox ese contenido queda invisible para siempre. Con animation-timeline, el estado inicial vive en el from de los keyframes — donde no hay soporte, no se aplica y el elemento se ve normal. La misma lógica del backwards vs opacity: 0 del quiz de stagger: el estado especial vive en la ANIMACIÓN, no en el elemento.
  3. Si el efecto es imprescindible hoy en todos los navegadores, la herramienta es JavaScript (IntersectionObserver, módulo 14 — o GSAP ScrollTrigger, módulo 16). Saber elegir la herramienta según el requisito ES el criterio senior.

Mini-reto

Ponle a "El Observador" su barra de progreso de lectura (fixed, scaleX, scroll(root)) y un reveal a las imágenes de los artículos con view() + animation-range. Después ábrelo en un navegador sin soporte si tienes alguno a mano — o simúlalo comentando la línea animation-timeline — y verifica el punto 2: ¿se ve TODO el contenido? Esa verificación de dos minutos es la diferencia entre mejora progresiva y página rota.

Qué sigue

El scroll ya anima DENTRO de la página. El siguiente salto es animar ENTRE páginas: que navegar de la portada al artículo no sea un parpadeo en blanco sino una transición fluida tipo app nativa. View Transitions API — y otra vez, sin JavaScript.