Crea animaciones vinculadas al desplazamiento del usuario usando solo CSS. Domina animation-timeline para efectos de scroll y parallax.
Hasta hace poco, crear una barra de progreso de lectura o efectos de revelado al hacer scroll requería librerías pesadas de JavaScript como ScrollMagic o GSAP. Esto penalizaba el rendimiento (puntuación de INP en Core Web Vitals).
Las **Scroll-Driven Animations** permiten vincular el progreso de una animación de CSS (`@keyframes`) directamente a la posición de scroll de un contenedor. El navegador optimiza esto en el hilo del compositor, logrando una fluidez de 60fps constantes.
En esta lección aprenderemos a usar `scroll()` para progresos globales y `view()` para animar elementos según entran o salen del viewport.
Animaciones basadas en la posición del contenedor.
La función `scroll()` crea una línea de tiempo basada en el desplazamiento. Se usa principalmente para elementos que reaccionan a cuánto ha bajado el usuario en la página.
Un caso de uso perfecto es la **barra de progreso de lectura**. Vinculamos el ancho (`width`) de una línea al scroll de la página: de 0% al inicio a 100% al final.
Animar elementos al entrar en escena.
A diferencia de `scroll()`, `view()` se basa en la visibilidad del propio elemento dentro del área de scroll (viewport). Es el sustituto nativo del `Intersection Observer` de JS.
Podemos definir **rangos de animación** (`animation-range`): `entry` (cuando empieza a asomar), `exit` (cuando se va) o `cover` (todo el trayecto). Esto permite crear efectos de revelado (fade-in) elegantes con apenas dos líneas de CSS.
Crea animaciones vinculadas al desplazamiento del usuario usando solo CSS. Domina animation-timeline para efectos de scroll y parallax.
Código del tema: display: grid; gap: 1rem;
Animaciones basadas en la posición del contenedor.
La función `scroll()` crea una línea de tiempo basada en el desplazamiento. Se usa principalmente para elementos que reaccionan a cuánto ha bajado el usuario en la página.
Un caso de uso perfecto es la **barra de progreso de lectura**. Vinculamos el ancho (`width`) de una línea al scroll de la página: de 0% al inicio a 100% al final.
Animar elementos al entrar en escena.
A diferencia de `scroll()`, `view()` se basa en la visibilidad del propio elemento dentro del área de scroll (viewport). Es el sustituto nativo del `Intersection Observer` de JS.
Podemos definir **rangos de animación** (`animation-range`): `entry` (cuando empieza a asomar), `exit` (cuando se va) o `cover` (todo el trayecto). Esto permite crear efectos de revelado (fade-in) elegantes con apenas dos líneas de CSS.
Visual de apoyo para entender entry cover y rango de animacion.
Refuerza la idea general de vincular animación y desplazamiento sin depender de JavaScript.
Muy útil para comprender cuándo empieza a animarse un elemento al entrar en el viewport.
