CSS Scroll-Linked Animations: @scroll-timeline (Legacy)

⚠️ ACTUALIZACIÓN IMPORTANTE: La especificación Scroll-Linked Animations ha sufrido cambios drásticos desde la publicación de este artículo. La sintaxis @scroll-timeline descrita aquí es una versión antigua.

Para la implementación moderna y estándar, te recomiendo investigar sobre la propiedad animation-timeline y las funciones scroll() y view().

👉 Recurso recomendado: Scroll-driven Animations por Bramus

En este artículo exploramos la propuesta inicial de la regla CSS @scroll-timeline, diseñada para controlar el progreso de una animación CSS basándose en la posición del scroll en lugar del tiempo.

Estado de la especificación

En el momento de escribir esto, la funcionalidad es experimental. Para probarla en Chrome (v89+), es necesario habilitar la flag: chrome://flags/#enable-experimental-web-platform-features.

Puedes consultar el soporte actual (para la nueva especificación) en: Can I Use: CSS Scroll Timeline.

Recursos de Aprendizaje

Aunque la sintaxis ha cambiado, los conceptos fundamentales sobre vincular animaciones al desplazamiento siguen siendo relevantes. Recomiendo encarecidamente el trabajo de Bramus Van Damme, quien ha documentado exhaustivamente la evolución de esta especificación:

Demos y Código

A pesar de los cambios en la especificación, dejo aquí los experimentos realizados con la sintaxis original para referencia histórica: