CSS Scroll-Driven Animations: el futuro de la web interactiva

Las scroll-driven animations ya se pueden hacer con CSS puro. Eso reduce dependencias de JavaScript y ayuda a mantener la animacion mas ligera y mas estable.

Que son

Son animaciones que reaccionan a la posicion del scroll. Sirven para efectos parallax, indicadores de progreso y apariciones progresivas sin montar una capa extra de scripting.

Sintaxis basica

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.element {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

Ejemplos reales

Barra de progreso

.progress-bar {
  animation: grow linear;
  animation-timeline: scroll(root);
}
@keyframes grow {
  from { scaleX: 0; }
  to { scaleX: 1; }
}

Efecto parallax

.parallax {
  animation: parallax linear;
  animation-timeline: view();
}
@keyframes parallax {
  to { transform: translateY(-50px); }
}

Soporte

La implementacion ya existe en navegadores modernos, pero sigue siendo buena idea envolverla con deteccion de soporte:

@supports (animation-timeline: scroll()) {
  /<em> scroll-driven animations </em>/
}

Conclusion

Si quieres motion ligado al contenido y no al tiempo, esta API abre una via mucho mas limpia. Sigue haciendo falta criterio, pero por fin hay una base nativa seria para este tipo de efectos.

Puedes probar variantes con nuestro Animation Generator.