CSS Scroll-Driven Animations: animaciones que siguen el scroll

En el desarrollo web, las animaciones han sido siempre un recurso visual muy atractivo. Sin embargo, hasta hace poco, la mayoría de ellas dependían de JavaScript para sincronizarse con el desplazamiento de la página (scroll).

Con la llegada de CSS Scroll-Driven Animations, ahora es posible crear animaciones ligadas al scroll usando solo CSS, sin necesidad de código adicional.

¿Qué son las Scroll-Driven Animations?

Son animaciones que se reproducen en función de la posición del scroll.

En otras palabras: el usuario controla la animación al desplazarse por la página.

Ejemplos de uso:

Un título que se desvanece mientras se hace scroll hacia abajo.
Una imagen que se amplía al ir bajando.
Un gráfico que se “dibuja” mientras el usuario recorre la sección.

Propiedades clave

Para lograrlo, CSS introduce nuevas herramientas:

@scroll-timeline

Define una línea de tiempo basada en el scroll.

@scroll-timeline mi-timeline {
  source: auto; /* elemento que controla el scroll */
  orientation: block; /* dirección: vertical (block) u horizontal (inline) */
}

animation-timeline

Vincula una animación a la línea de tiempo creada.

.caja {
  animation: mover 1s linear;
  animation-timeline: mi-timeline;
}

animation-range

Controla el rango del scroll en el que se ejecuta la animación.

.caja {
  animation-range: entry 0% exit 100%; 
}

Ejemplo práctico

Como puedes observar en este artículo, los «bloques de código», que contienen párrafos y estos bloques de código con el fondo negro, van apareciendo conforme vas leyendo, este es el código que hace esto posible:

<div class="scroll-driven">
  //Aquí va el contenido del bloque de código, como párrafos, etc...
</div>

.scroll-driven {
  opacity: 0;
  animation: aparecerImagen linear both;
  animation-timeline: view(); 
  animation-range: 20% 40%;
}
@keyframes aparecerImagen {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Al hacer scroll, los bloques van apareciendo.

Ventajas de CSS Scroll-Driven Animations

No requieren JavaScript para sincronizar animaciones con el scroll.
Mejoran el rendimiento porque se ejecutan en el motor de renderizado del navegador.
Más fáciles de mantener y escalar en proyectos grandes.
Soporte cada vez mayor en navegadores modernos (Chrome, Edge, Safari, Firefox en desarrollo).

Conclusión

Las CSS Scroll-Driven Animations marcan un gran paso hacia una web más interactiva y visualmente atractiva, con menos dependencia de JavaScript.

Si antes animar con el scroll era complejo y pesado, ahora con unas pocas líneas de CSS se pueden crear efectos dinámicos, fluidos y optimizados.

En resumen: el scroll ya no solo desplaza contenido, ¡ahora también anima tu sitio web!

Cool Things In My Cloud