Cómo animar elementos durante el desplazamiento con animaciones basadas en desplazamientos

Aprende a trabajar con cronogramas de desplazamiento y de vista para crear animaciones basadas en desplazamientos de forma declarativa.

Animaciones basadas en desplazamientos

Las animaciones basadas en desplazamientos son un patrón común de UX en la Web. Una animación basada en desplazamientos está vinculada a la posición de desplazamiento de un contenedor de desplazamiento. Esto significa que a medida que te desplazas hacia arriba o hacia abajo, la animación vinculada se arrastra hacia delante o hacia atrás en respuesta directa. Algunos ejemplos son efectos como el paralaje de imágenes de fondo o los indicadores de lectura que se mueven a medida que te desplazas.

Un tipo similar de animación basada en desplazamientos es una animación vinculada a la posición de un elemento dentro de su contenedor de desplazamiento. Con él, por ejemplo, los elementos pueden atenuarse cuando se visualizan.

La forma clásica de lograr este tipo de efectos es responder a eventos de desplazamiento en el subproceso principal, lo que genera dos problemas principales:

• Los navegadores modernos realizan el desplazamiento en un proceso independiente y, por lo tanto, entregan eventos de desplazamiento de manera asíncrona.
• Las animaciones del subproceso principal están sujetas a bloqueos.

Esto hace que sea muy difícil o imposible crear animaciones basadas en desplazamientos que estén sincronizadas con el desplazamiento.

A partir de la versión 115 de Chrome, hay un nuevo conjunto de APIs y conceptos que puedes usar para habilitar animaciones declarativas basadas en desplazamientos: los cronogramas de desplazamiento y la vista de cronogramas.

Estos nuevos conceptos se integran en la API de Web Animations (WAAPI) y la API de CSS Animations existentes, lo que les permite heredar las ventajas que brindan estas APIs existentes. Esto incluye la capacidad de hacer que las animaciones basadas en desplazamientos se ejecuten fuera del subproceso principal. Sí, lee esto correctamente: ahora puedes tener animaciones fluidas y fluidas, controladas por el desplazamiento, que se ejecutan fuera del subproceso principal, con solo unas pocas líneas de código adicional. ¿Y qué no?

Un pequeño resumen sobre las animaciones en la Web

Animaciones en la Web con CSS

Para crear una animación en CSS, define un conjunto de fotogramas clave con la regla at @keyframes. Vincúlala a un elemento con la propiedad animation-name y configura un animation-duration para determinar cuánto tiempo debería tardar la animación. Hay más propiedades a largo plazo animation-* disponibles, como animation-easing-function y animation-fill-mode, por nombrar algunas, que se pueden combinar en la abreviatura animation.

Por ejemplo, esta es una animación que aumenta la escala de un elemento en el eje X y, al mismo tiempo, cambia su color de fondo:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}

Animaciones en la Web con JavaScript

En JavaScript, la API de Web Animations se puede usar para lograr exactamente lo mismo. Para ello, puedes crear instancias nuevas de Animation y KeyFrameEffect, o bien usar el método Element animate(), que es mucho más corto.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Este resultado visual del fragmento de JavaScript anterior es idéntico a la versión anterior de CSS.

Cronogramas de animación

De forma predeterminada, una animación adjunta a un elemento se ejecuta en el cronograma del documento. Su hora de origen comienza en 0 cuando se carga la página y comienza a avanzar a medida que avanza la hora del reloj. En eso consiste el cronograma predeterminado para animaciones y, hasta el día de hoy, era el único al que se podía acceder.

La Especificación de animaciones basadas en desplazamientos define dos tipos nuevos de cronogramas que puedes usar:

• Cronograma del progreso del desplazamiento: Es un cronograma vinculado a la posición de desplazamiento de un contenedor de desplazamiento a lo largo de un eje particular.
• Cronograma del progreso de visualización: Es un cronograma vinculado a la posición relativa de un elemento particular dentro de su contenedor de desplazamiento.

Cronograma del progreso del desplazamiento

Un cronograma del progreso del desplazamiento es un cronograma de animación vinculado al progreso en la posición de desplazamiento de un contenedor de desplazamiento, también llamado puerto de desplazamiento o dispositivo de desplazamiento, a lo largo de un eje determinado. Convierte una posición en un rango de desplazamiento en un porcentaje de progreso.

La posición inicial de desplazamiento representa un progreso del 0% y la posición final representa un progreso del 100%. En la siguiente visualización, puedes ver que el progreso aumenta del 0% al 100% a medida que te desplazas por la barra de desplazamiento de arriba hacia abajo.

✨ Pruébala por tu cuenta

Un cronograma del progreso del desplazamiento a menudo se abrevia como "Cronograma de desplazamiento".

Cronograma del progreso de la visualización

Este tipo de cronograma se vincula al progreso relativo de un elemento particular dentro de un contenedor de desplazamiento. Al igual que en un cronograma del progreso del desplazamiento, se hace un seguimiento del desplazamiento de un usuario. A diferencia de un cronograma del progreso del desplazamiento, lo que determina el progreso es la posición relativa de un objeto dentro de esa barra.

Esto se compara con el funcionamiento de IntersectionObserver, que puede hacer un seguimiento de la visibilidad de un elemento en la barra de desplazamiento. Si el elemento no se visualiza en la barra de desplazamiento, no hay una intersección. Si es visible en la barra de desplazamiento, incluso para la parte más pequeña, hay una intersección.

Un cronograma del progreso de visualización comienza desde el momento en el que un objeto comienza a cruzarse con la barra de desplazamiento y termina cuando deja de hacerlo. En la siguiente visualización, puedes ver que el progreso comienza en 0% cuando el objeto ingresa al contenedor de desplazamiento y llega al 100% en el mismo momento en el que sale de él.

✨ Pruébala por tu cuenta

Por lo general, un cronograma del progreso de visualización se abrevia y dice simplemente "Ver cronograma". Es posible segmentar partes específicas de un cronograma de visualización según el tamaño del objeto, pero hablaremos sobre ello más adelante.

Cómo practicar con los cronogramas del progreso del desplazamiento

Crea un cronograma anónimo del progreso del desplazamiento en CSS

La forma más sencilla de crear un cronograma de desplazamiento en CSS es usar la función scroll(). Esto crea un cronograma de desplazamiento anónimo que puedes configurar como el valor de la nueva propiedad animation-timeline.

Ejemplo:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}

La función scroll() acepta los argumentos <scroller> y <axis>.

Los valores aceptados para el argumento <scroller> son los siguientes:

• nearest: Utiliza el contenedor de desplazamiento principal más cercano (predeterminado).
• root: Usa el viewport del documento como el contenedor de desplazamiento.
• self: Utiliza el elemento como contenedor de desplazamiento.

Los valores aceptados para el argumento <axis> son los siguientes:

• block: Utiliza la medida de progreso junto con el eje de bloque del contenedor de desplazamiento (predeterminado).
• inline: Utiliza la medida de progreso junto con el eje de intercalado del contenedor de desplazamiento.
• y: Utiliza la medida de progreso junto con el eje y del contenedor de desplazamiento.
• x: Utiliza la medida de progreso junto con el eje x del contenedor de desplazamiento.

Por ejemplo, para vincular una animación a la barra de desplazamiento raíz en el eje de bloque, los valores que se deben pasar a scroll() son root y block. En conjunto, el valor es scroll(root block).

Demostración: Indicador de progreso de lectura

Esta demostración tiene un indicador de progreso de lectura fijo en la parte superior del viewport. A medida que te desplazas por la página, la barra de progreso aumenta hasta ocupar todo el ancho del viewport cuando se llega al final del documento. Se usa un cronograma anónimo del progreso del desplazamiento para controlar la animación.

✨ Pruébala por tu cuenta

El indicador de progreso de lectura se posiciona en la parte superior de la página con la posición fija. Para aprovechar las animaciones compuestas, no se anima width, pero el elemento se reduce en el eje x mediante un transform.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

El cronograma de la animación grow-progress en el elemento #progress se establece en un cronograma anónimo que se crea con scroll(). No se proporcionan argumentos a scroll(), por lo que volverá a sus valores predeterminados.

La barra de desplazamiento predeterminada para realizar un seguimiento es nearest, y el eje predeterminado es block. Esto apunta de manera efectiva a la barra de desplazamiento raíz, ya que es la barra de desplazamiento más cercana del elemento #progress, mientras se realiza un seguimiento de la dirección de bloque.

Creación de un cronograma del progreso del desplazamiento con nombre en CSS

Una forma alternativa para definir el cronograma del progreso de desplazamiento es usar uno que tenga nombre. Es un poco más detallada, pero puede ser útil cuando no te orientas a una barra de desplazamiento superior o a la barra de desplazamiento raíz, o cuando la página utiliza varios cronogramas o cuando las búsquedas automáticas no funcionan. De esta forma, puedes identificar un cronograma del progreso del desplazamiento por el nombre que le asignaste.

Para crear un cronograma del progreso del desplazamiento con nombre en un elemento, configura la propiedad CSS de scroll-timeline-name en el contenedor de desplazamiento en un identificador de tu preferencia. El valor debe comenzar con --.

Si deseas modificar el eje al que quieres hacer seguimiento, declara también la propiedad scroll-timeline-axis. Los valores permitidos son los mismos del argumento <axis> de scroll().

Finalmente, para vincular la animación al cronograma del progreso del desplazamiento, define la propiedad animation-timeline en el elemento que se debe animar con el mismo valor que el identificador que se usó para scroll-timeline-name.

Ejemplo de código:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Si lo deseas, puedes combinar scroll-timeline-name y scroll-timeline-axis en la abreviatura scroll-timeline. Por ejemplo:

scroll-timeline: --my-scroller inline;

Demostración: Indicador de pasos del carrusel horizontal

Esta demostración presenta un indicador de pasos que se muestra sobre cada carrusel de imágenes. Cuando un carrusel contiene tres imágenes, la barra indicadora comienza en un 33% de ancho para indicar que estás viendo actualmente la imagen uno de tres. Cuando se visualiza la última imagen (determinada por la barra de desplazamiento hasta el final), el indicador ocupa todo el ancho de la barra de desplazamiento. Se usa un cronograma del progreso del desplazamiento con nombre para controlar la animación.

✨ Pruébala por tu cuenta

El lenguaje de marcado base para una galería es el siguiente:

<div class="gallery" style="--num-images: 2;">
  <div class="gallery__scrollcontainer">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">…</div>
    <div class="gallery__entry">…</div>
  </div>
</div>

El elemento .gallery__progress está posicionado absolutamente dentro del elemento wrapper .gallery. Su tamaño inicial está determinado por la propiedad personalizada --num-images.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer dispone los elementos .gallery__entry contenidos de forma horizontal y es el elemento que se desplaza. Cuando se realiza el seguimiento de su posición de desplazamiento, se anima la .gallery__progress. Para ello, consulta el cronograma del progreso del desplazamiento --gallery__scrollcontainer.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}

Cómo crear un cronograma del progreso del desplazamiento con JavaScript

Para crear un cronograma de desplazamiento en JavaScript, crea una instancia nueva de la clase ScrollTimeline. Pasa una bolsa de propiedad con los elementos source y axis de los que deseas hacer un seguimiento.

• source: Es la referencia al elemento de cuya barra de desplazamiento deseas realizar un seguimiento. Usa document.documentElement para orientar a la barra de desplazamiento raíz.
• axis: Determina a qué eje se le hará un seguimiento. Al igual que la variante de CSS, los valores aceptados son block, inline, x y y.

const tl = new ScrollTimeline({
  source: document.documentElement,
});

Para adjuntarla a una animación web, pásala como la propiedad timeline y omite cualquier duration si la hay.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demostración: Indicador de progreso de lectura (revisión)

Para volver a crear el indicador de progreso de lectura con JavaScript y usar el mismo lenguaje de marcado, usa el siguiente código JavaScript:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

El resultado visual es idéntico en la versión de CSS: el elemento timeline creado hace un seguimiento de la barra de desplazamiento raíz y aumenta la escala de #progress en el eje X del 0% al 100% a medida que te desplazas por la página.

✨ Pruébala por tu cuenta

Cómo ser práctico con el cronograma del progreso de visualización

Crea un cronograma del progreso de vista anónimo en CSS

Para crear un cronograma del progreso de visualización, usa la función view(). Los argumentos que acepta son <axis> y <view-timeline-inset>.

• El valor <axis> es el mismo que se utiliza para el cronograma del progreso de desplazamiento y define los ejes a los que se les hace seguimiento. El valor predeterminado es block.
• Con <view-timeline-inset>, puedes especificar un desplazamiento (positivo o negativo) para ajustar los límites cuando se considera que un elemento está a la vista o no. El valor debe ser un porcentaje o auto, donde auto debe ser el valor predeterminado.

Por ejemplo, para vincular una animación a un elemento que se cruza con su barra de desplazamiento en el eje de bloque, usa view(block). Al igual que con scroll(), establece esto como el valor de la propiedad animation-timeline y no olvides establecer animation-duration en auto.

Con el siguiente código, se aplicará un fundido de entrada de cada img a medida que cruza el viewport mientras te desplazas.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}

Intermezzo: Ver intervalos de Rutas

De forma predeterminada, una animación vinculada al cronograma de visualización se adjunta a todo el intervalo del cronograma. Esta comienza desde el momento en que el objeto está a punto de ingresar al puerto de desplazamiento y finaliza cuando lo abandona por completo.

También es posible vincularla a una parte específica del cronograma de visualización especificando el intervalo al que se debe adjuntar. Por ejemplo, solo cuando el objeto ingresa en la barra de desplazamiento. En la siguiente visualización, el progreso comienza en 0% cuando el objeto ingresa al contenedor de desplazamiento, pero ya alcanza el 100% desde el momento en que se conecta por completo.

Estos son los posibles intervalos de cronogramas de visualización a los que te puedes orientar:

• cover: Representa el intervalo completo del cronograma del progreso de visualización.
• entry: Representa el intervalo durante el cual el cuadro principal ingresa al intervalo de visibilidad del progreso de visualización.
• exit: Representa el intervalo durante el cual el cuadro principal sale del intervalo de visibilidad del progreso de visualización.
• entry-crossing: Representa el intervalo durante el cual el cuadro principal cruza el límite del borde final.
• exit-crossing: Representa el intervalo durante el cual el cuadro principal cruza el límite del borde inicial.
• contain: Representa el intervalo durante el cual el cuadro principal está completamente contenido en su intervalo de visibilidad del progreso de visualización dentro del puerto de desplazamiento, o lo cubre por completo. Esto depende de si el objeto es más alto o bajo que la barra de desplazamiento.

Para definir un intervalo, debes establecer un inicio y un fin de intervalo. Cada uno consta de un nombre de rango (consulta la lista anterior) y un desplazamiento de rango para determinar la posición dentro de ese nombre de rango. El desplazamiento del rango suele ser un porcentaje que varía de 0% a 100%, pero también puedes especificar una longitud fija, como 20em.

Por ejemplo, si deseas ejecutar una animación desde el momento en que un sujeto ingresa, elige entry 0% como inicio del rango. Para que finalice el momento en que el sujeto ingresó, elige entry 100% como valor para el final del intervalo.

En CSS, puedes configurar esto con la propiedad animation-range. Ejemplo:

animation-range: entry 0% entry 100%;

En JavaScript, usa las propiedades rangeStart y rangeEnd.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Utiliza la herramienta incorporada a continuación para ver lo que representa cada nombre de intervalo y cómo los porcentajes afectan las posiciones iniciales y finales. Intenta establecer el inicio de rango en entry 0% y el final de rango en cover 50% y, luego, arrastra la barra de desplazamiento para ver el resultado de la animación.

Mirar una grabación

Como puedes notar mientras juegues con estas herramientas para ver intervalos del cronograma, algunos rangos se pueden orientar mediante dos combinaciones diferentes de nombre de rango + desplazamiento de rango. Por ejemplo, entry 0%, entry-crossing 0% y cover 0% se orientan a la misma área.

Cuando los valores de inicio y fin de rango se segmentan para el mismo nombre de rango y abarcan todo el rango (desde 0% hasta 100%), puedes acortar el valor simplemente al nombre del rango. Por ejemplo, animation-range: entry 0% entry 100%; se puede reescribir en el animation-range: entry mucho más corto.

Demostración: Revelación de imágenes

En esta demostración, se atenúan las imágenes a medida que ingresan al puerto de desplazamiento. Esto se hace con un cronograma de vista anónima. El rango de animación se modificó para que cada imagen tenga una opacidad total cuando se encuentre en la mitad de la barra de desplazamiento.

✨ Pruébala por tu cuenta

El efecto de expansión se logra usando una ruta de recorte animada. La CSS que se usa para este efecto es la siguiente:

@keyframes reveal {
  from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
  to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Creación de un cronograma del progreso de visualización con nombre en CSS

Así como los cronogramas de desplazamiento tienen versiones con nombre, también puedes crear cronogramas de vistas con nombre. En lugar de las propiedades de scroll-timeline-*, usa variantes que llevan el prefijo view-timeline-, es decir, view-timeline-name y view-timeline-axis.

Se aplican el mismo tipo de valores y las mismas reglas para buscar un cronograma con nombre.

Demostración: Revelación de imágenes (revisión)

Al rehacer la demostración de revelación de imágenes de antes, el código revisado se ve de la siguiente manera:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

Con view-timeline-name: revealing-image, se realizará un seguimiento del elemento dentro de la barra de desplazamiento más cercana. Luego, se usa el mismo valor que el de la propiedad animation-timeline. El resultado visual es exactamente el mismo que antes.

✨ Pruébala por tu cuenta

Creación de un cronograma del progreso de visualización en JavaScript

Para crear un cronograma de visualización en JavaScript, crea una instancia nueva de la clase ViewTimeline. Pasa una bolsa de propiedad con el subject del que deseas hacer un seguimiento, axis y inset.

• subject: Es una referencia al elemento del que deseas hacer un seguimiento en su propia barra de desplazamiento.
• axis: Es el eje al que se le realizará el seguimiento. Al igual que la variante de CSS, los valores aceptados son block, inline, x y y.
• inset: Es un ajuste de inserción (positivo) o de desplazamiento (negativo) del puerto de desplazamiento cuando se determina si el cuadro está a la vista.

const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Para adjuntarla a una animación web, pásala como la propiedad timeline y omite cualquier duration si la hay. De manera opcional, pasa la información del rango con las propiedades rangeStart y rangeEnd.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Pruébala por tu cuenta

Más opciones para probar

Adjuntar varios intervalos de cronograma de vista con un conjunto de fotogramas clave

Veamos esta demostración de lista de contactos en la que las entradas están animadas. A medida que una entrada de lista ingresa al puerto de desplazamiento desde la parte inferior, este se desliza y se atenúa, y cuando sale del puerto de desplazamiento en la parte superior, este se desliza y se desvanece.

✨ Pruébala por tu cuenta

En esta demostración, cada elemento se decora con un cronograma de vista que hace un seguimiento del elemento a medida que cruza su puerto de desplazamiento, pero se le adjuntan dos animaciones basadas en desplazamientos. La animación animate-in se adjunta al intervalo entry del cronograma y la animación animate-out al intervalo exit del cronograma.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

En lugar de ejecutar dos animaciones diferentes adjuntadas a dos rangos diferentes, también es posible crear un conjunto de fotogramas clave que ya contenga la información del intervalo.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Como los fotogramas clave contienen la información del intervalo, no necesitas especificar el animation-range. El resultado es exactamente el mismo que antes.

✨ Pruébala por tu cuenta

Cómo adjuntar un cronograma de desplazamiento no principal

El mecanismo de búsqueda de los cronogramas de desplazamiento con nombre y los cronogramas de vista con nombre se limita solo a los elementos principales de desplazamiento con nombre. No obstante, con frecuencia, el elemento que se debe animar no es un elemento secundario de la barra de desplazamiento al que se debe realizar un seguimiento.

Para que esto funcione, entra en juego la propiedad timeline-scope. Esta propiedad se usa para declarar una línea de tiempo con ese nombre sin crearla. Esto le da a la línea de tiempo con ese nombre un alcance más amplio. En la práctica, se usa la propiedad timeline-scope en un elemento superior compartido para que se pueda adjuntar el cronograma de un desplazador secundario.

Por ejemplo:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

En este fragmento, se incluye lo siguiente:

• El elemento .parent declara una línea de tiempo con el nombre --tl. Cualquier elemento secundario puede encontrarlo y usarlo como un valor para la propiedad animation-timeline.
• El elemento .scroller define un cronograma de desplazamiento con el nombre --tl. De forma predeterminada, solo será visible para sus elementos secundarios, pero, como .parent lo tiene configurado como scroll-timeline-root, se adjunta a él.
• El elemento .subject usa el cronograma --tl. Recorre su árbol principal y encuentra --tl en .parent. Con --tl de .parent apuntando al --tl de .scroller, .subject básicamente hará un seguimiento del cronograma del progreso del desplazamiento de .scroller.

En otras palabras, puedes usar timeline-root para mover una línea de tiempo hacia un principal (también conocido como elevación), de modo que todos los elementos secundarios del principal puedan acceder a él.

La propiedad timeline-scope se puede usar con los cronogramas de desplazamiento y de visualización.

Más demostraciones y recursos

Todas las demostraciones que se mencionan en este artículo sobre el minisitio desplazada a través de-animaciones.style El sitio web incluye muchas más demostraciones para destacar lo que es posible con las animaciones basadas en desplazamientos.

Una de las demostraciones adicionales es esta lista de portadas de álbumes. Cada cubierta gira en 3D mientras toma el foco central.

✨ Pruébala por tu cuenta

O esta demostración de tarjetas apiladas que aprovecha position: sticky. A medida que se apilan las tarjetas, las ya fijadas se reducirán, lo que creará un agradable efecto de profundidad. Al final, toda la pila se desliza fuera de la vista como un grupo.

✨ Pruébala por tu cuenta

También se incluye en scroll-driven-animations.style es una colección de herramientas, como la visualización del progreso del rango del cronograma de visualización que se incluyó anteriormente en esta publicación.

Las animaciones basadas en desplazamientos también se abordan en Novedades de Animaciones web en Google I/O 2023.