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

Aprende a trabajar con los cronogramas de desplazamiento y los cronogramas de visualización para crear animaciones basadas en el desplazamiento de forma declarativa.

Bramus

Fecha de publicación: 5 de mayo de 2023

Animaciones basadas en el desplazamiento

Las animaciones controladas por desplazamiento son un patrón de UX común en la Web. Una animación basada en el desplazamiento 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 adelante o hacia atrás en respuesta directa. Algunos ejemplos son los efectos como las imágenes de fondo con paralaje o los indicadores de lectura que se mueven a medida que te desplazas.

Un tipo similar de animación controlada por desplazamiento es una animación vinculada a la posición de un elemento dentro de su contenedor de desplazamiento. Con ella, por ejemplo, los elementos pueden aparecer gradualmente a medida que entran en la vista.

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

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

Esto hace que sea imposible o muy difícil crear animaciones controladas por el desplazamiento con un buen rendimiento y 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 el desplazamiento: Scroll Timelines y View Timelines.

Estos nuevos conceptos se integran con la API de Web Animations (WAAPI) y la API de CSS Animations existentes, lo que les permite heredar las ventajas que aportan estas APIs existentes. Esto incluye la capacidad de ejecutar animaciones controladas por desplazamiento fuera del subproceso principal. Sí, leíste bien: ahora puedes tener animaciones fluidas controladas por el desplazamiento, que se ejecutan fuera del subproceso principal, con solo unas pocas líneas de código adicionales. ¿Qué más se puede pedir?

Animaciones en la Web: un pequeño resumen

Animaciones en la Web con CSS

Para crear una animación en CSS, define un conjunto de fotogramas clave con la regla @ @keyframes. Vincúlalo a un elemento con la propiedad animation-name y, al mismo tiempo, establece un animation-duration para determinar cuánto debe durar la animación. Hay más propiedades abreviadas de animation-* disponibles (animation-easing-function y animation-fill-mode, por nombrar algunas), que se pueden combinar en la abreviatura animation.

Por ejemplo, aquí tienes 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, se puede usar la API de Web Animations 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 al de la versión anterior de CSS.

Cronogramas de animación

De forma predeterminada, una animación que se 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 determinado.
• Cronograma del progreso de visualización: Es un cronograma vinculado a la posición relativa de un elemento en particular dentro de su contenedor de desplazamiento.

Cronograma del progreso del desplazamiento

Un cronograma del progreso del desplazamiento es un cronograma de animación que se vincula al progreso en la posición de desplazamiento de un contenedor de desplazamiento, también llamado puerto de desplazamiento o barra de desplazamiento, a lo largo de un eje determinado. Convierte la posición de un intervalo 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 desplazas la barra de desplazamiento de arriba hacia abajo.

✨ Pruébalo

Un cronograma del progreso del desplazamiento a menudo se abrevia simplemente 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 realiza el seguimiento del avance de una barra de desplazamiento. Pero, difieren en que es la posición relativa de un objeto dentro de ese cronograma lo que determina el progreso.

Esto se puede comparar 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 momento en que el objeto sale del contenedor de desplazamiento.

✨ Pruébalo

Un cronograma del progreso de visualización suele abreviarse simplemente como “Cronograma de visualización”. Es posible segmentar partes específicas de un cronograma de visualización según el tamaño del sujeto, pero hablaremos de eso más adelante.

Cómo usar de forma práctica los cronogramas del progreso del desplazamiento

Cómo crear 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(). De esta forma, se 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: Utiliza 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 (configuración predeterminada).
• inline: Utiliza la medición del 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 al desplazador 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 hacia abajo en la página, la barra de progreso crece hasta ocupar todo el ancho del viewport cuando llegas al final del documento. Se usa un cronograma anónimo del progreso del desplazamiento para controlar la animación.

✨ Pruébalo

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 el width, sino que el elemento se reduce en el eje X con 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 se recurrirá a sus valores predeterminados.

El objeto de desplazamiento predeterminado para hacer el seguimiento es el nearest, y el eje predeterminado es block. Esto segmenta de forma eficaz la barra de desplazamiento raíz, ya que es la barra de desplazamiento más cercana del elemento #progress, mientras se hace un seguimiento de su dirección de bloqueo.

Cómo crear 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 proceso un poco más detallado, 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 múltiples 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 --.

Para ajustar qué eje se debe hacer un seguimiento, también declara 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

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

✨ Pruébalo

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 se posiciona de forma absoluta dentro del elemento contenedor .gallery. Su tamaño inicial se determina con 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)));
}

El elemento .gallery__scrollcontainer distribuye los elementos .gallery__entry contenidos de forma horizontal y es el elemento que se desplaza. Al hacer un seguimiento de su posición de desplazamiento, el .gallery__progress se anima. Esto se hace haciendo referencia al cronograma del progreso del desplazamiento con nombre --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 una Scroll Timeline en JavaScript, crea una instancia nueva de la clase ScrollTimeline. Pasa una bolsa de propiedades con los valores de source y axis que deseas hacer un seguimiento.

• source: Es una referencia al elemento cuyo objeto de desplazamiento deseas hacer un seguimiento. Usa document.documentElement para segmentar el elemento desplazable raíz.
• axis: Determina qué eje se debe hacer un seguimiento. Al igual que en la variante de CSS, los valores aceptados son block, inline, x y y.

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

Para adjuntarlo a una animación web, pásalo como la propiedad timeline y omite cualquier duration si hubiera alguno.

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

Demostración: Indicador de progreso de lectura, segunda parte

Para recrear 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 timeline creado hace un seguimiento del elemento de desplazamiento raíz y escala el #progress en el eje X del 0% al 100% a medida que te desplazas por la página.

✨ Pruébalo

Cómo usar el cronograma del progreso de visualización de forma práctica

Cómo crear un cronograma anónimo del progreso de visualización 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á en la vista o no. El valor debe ser un porcentaje o auto, siendo auto el valor predeterminado.

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

Con el siguiente código, cada img aparecerá con un efecto de entrada a medida que cruce la ventana gráfica mientras te desplazas.

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

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

Intermezzo: Intervalos del cronograma de visualización

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 el que el objeto está a punto de ingresar al puerto de desplazamiento y finaliza cuando el objeto sale del puerto de desplazamiento 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 intervalos posibles del cronograma de visualización a los que puedes segmentar tus anuncios:

• 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 rango, debes establecer un inicio y un final. 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. Por lo general, el desplazamiento de rango es un porcentaje que va del 0% al 100%, pero también puedes especificar una longitud fija, como 20em.

Por ejemplo, si quieres ejecutar una animación desde el momento en que entra un sujeto, elige entry 0% como el inicio del rango. Para que esté lista cuando ingrese el sujeto, elige entry 100% como valor para el extremo del rango.

En CSS, se establece 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%',
  }
);

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

Cómo mirar una grabación

Como puedes observar mientras pruebas estas herramientas de View Timeline Ranges, algunos rangos pueden segmentarse con dos combinaciones diferentes de nombre de rango y desplazamiento de rango. Por ejemplo, entry 0%, entry-crossing 0% y cover 0% segmentan para la misma área.

Cuando el inicio y el final del rango apuntan al mismo nombre de rango y abarcan todo el rango, desde el 0% hasta el 100%, puedes acortar el valor simplemente al nombre del rango. Por ejemplo, animation-range: entry 0% entry 100%; se puede reescribir como animation-range: entry, que es mucho más corto.

Demostración: Revelación de imágenes

En esta demostración, las imágenes se desvanecen a medida que ingresan al puerto de desplazamiento. Esto se hace con un cronograma de visualización anónimo. Se ajustó el rango de animación para que cada imagen tenga opacidad completa cuando el control deslizante esté a mitad de camino.

✨ Pruébalo

El efecto de expansión se logra con una ruta de recorte animada. El CSS que se usa para este efecto es el 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%;
}

Cómo crear un cronograma del progreso de la visualización con nombre en CSS

Al igual que los cronogramas de desplazamiento tienen versiones con nombre, también puedes crear cronogramas de visualización con nombre. En lugar de las propiedades scroll-timeline-*, usa variantes que lleven 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 una línea de tiempo con nombre.

Demostración: Revelación de imágenes, segunda parte

Si volvemos a trabajar en la demostración de revelación de imágenes anterior, 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 hará un seguimiento del elemento dentro de su scroller más cercano. Luego, se usa el mismo valor como el valor de la propiedad animation-timeline. El resultado visual es exactamente el mismo que antes.

✨ Pruébalo

Cómo crear un cronograma del progreso de visualización en JavaScript

Para crear una línea de tiempo de la vista en JavaScript, crea una instancia nueva de la clase ViewTimeline. Pasa una bolsa de propiedades con el subject que deseas hacer un seguimiento, axis y inset.

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

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

Para adjuntarlo a una animación web, pásalo como la propiedad timeline y omite cualquier duration si hubiera alguno. De manera opcional, pasa información de rango con las propiedades rangeStart y rangeEnd.

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

✨ Pruébalo

Más cosas para probar

Cómo adjuntar a varios rangos de View Timeline con un conjunto de fotogramas clave

Veamos esta demostración de la lista de contactos en la que las entradas de la lista se animan. Cuando una entrada de la lista ingresa al puerto de desplazamiento desde la parte inferior, se desliza y se desvanece, y cuando sale del puerto de desplazamiento por la parte superior, se desliza y se desvanece.

✨ Pruébalo

En esta demostración, cada elemento se decora con un cronograma de visualización que hace un seguimiento del elemento a medida que cruza su viewport, pero se le adjuntan dos animaciones controladas por desplazamiento. 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 adjuntas a dos intervalos 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 es necesario que especifiques el animation-range. El resultado es exactamente el mismo que antes.

✨ Pruébalo

Cómo adjuntar un Scroll Timeline que no es antecesor

El mecanismo de búsqueda de las líneas de tiempo de desplazamiento y de vista con nombre se limita solo a los elementos principales de desplazamiento. Sin embargo, muy a menudo, el elemento que se debe animar no es un elemento secundario del elemento de desplazamiento que se debe hacer un seguimiento.

Para que esto funcione, entra en juego la propiedad timeline-scope. Usas esta propiedad para declarar una línea de tiempo con ese nombre sin crearla realmente. Esto le da al cronograma con ese nombre un alcance más amplio. En la práctica, usas la propiedad timeline-scope en un elemento principal compartido para que la línea de tiempo de un elemento secundario de desplazamiento se pueda adjuntar a él.

Por ejemplo:

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

En este fragmento, sucede lo siguiente:

• El elemento .parent declara una línea de tiempo con el nombre --tl. Cualquier elemento secundario puede encontrarlo y usarlo como valor para la propiedad animation-timeline.
• En realidad, el elemento .scroller define un cronograma de desplazamiento con el nombre --tl. De forma predeterminada, solo sería 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 de elementos superiores y encuentra --tl en el .parent. Con el --tl del .parent apuntando al --tl de .scroller, el .subject 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 hasta un elemento superior (también conocido como elevación), de modo que todos los elementos secundarios del elemento superior puedan acceder a ella.

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 abordan en este artículo en el minisitio de scroll-driven-animations.style El sitio web incluye muchas más demostraciones para destacar lo que es posible con las animaciones controladas por desplazamiento.

Una de las demostraciones adicionales es esta lista de portadas de álbumes. Cada portada rota en 3D a medida que se convierte en el centro de atención.

✨ Pruébalo

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

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

Las animaciones controladas por desplazamiento también se abordan en Novedades sobre Web Animations en Google I/O 2023.