Obtén información sobre cómo trabajar con cronogramas de desplazamiento y visualización de cronogramas para crear animaciones basadas en desplazamientos de manera 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 una 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 basada en desplazamientos es una animación que está vinculada a la posición de un elemento dentro de su contenedor de desplazamiento. Con él, por ejemplo, los elementos pueden aparecer gradualmente a medida que se visualizan.
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 independiente y, por lo tanto, entregan eventos de desplazamiento de forma asíncrona.
- Las animaciones del subproceso principal están sujetas a bloqueos.
Esto hace que sea imposible o muy difícil crear animaciones basadas en desplazamientos de alto rendimiento 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: cronogramas de desplazamiento y visualiza cronogramas.
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 hacer que las animaciones basadas en desplazamientos se ejecuten fuera del subproceso principal. Sí. Lee esa información correctamente. Ahora puedes tener animaciones fluidas y atractivas, impulsadas por el desplazamiento, que se ejecutan desde el subproceso principal, con solo unas pocas líneas de código adicionales. ¿Qué cosa no te puede gustar?
Un pequeño resumen de 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
. Vincula la imagen a un elemento con la propiedad animation-name
y, al mismo tiempo, configura una animation-duration
para determinar cuánto tiempo debe tardar la animación. Hay más propiedades de larga duración de animation-*
disponibles, 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 escala verticalmente 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 nuevas instancias Animation
y KeyFrameEffect
, o bien usar el método animate()
de Element
, 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. La 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 nuevos tipos 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 en particular.
- Cronograma del progreso de la visualización: Es un cronograma vinculado a la posición relativa de un elemento específico dentro de su contenedor de desplazamiento.
Cronograma del progreso del desplazamiento
El 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 scrollport o scroller, a lo largo de un eje en particular. Convierte una posición dentro 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 te desplazas por la barra de desplazamiento de arriba abajo.
✨ Pruébala
El 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 el cronograma del progreso del desplazamiento, se realiza un seguimiento del desplazamiento de un desplazador. A diferencia de un cronograma del progreso del desplazamiento, es la posición relativa de un objeto dentro de ese cronograma lo que determina el progreso.
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 momento exacto en que sale del contenedor de desplazamiento.
✨ Pruébala
Por lo general, el cronograma del progreso de visualización se abrevia como “Ver cronograma”. Es posible orientarse a partes específicas de un cronograma de visualización según el tamaño del sujeto, pero se abordará sobre eso más adelante.
Práctica con los cronogramas del progreso del desplazamiento
Crea un cronograma anónimo del progreso del desplazamiento en CSS
La forma más fácil de crear un cronograma de desplazamiento en CSS es usar la función scroll()
. De esta manera, se crea un cronograma de desplazamiento anónimo que puedes establecer como valor para 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 (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 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 el ancho completo del viewport cuando llega al final del documento. Se usa un cronograma anónimo del progreso del desplazamiento para controlar la animación.
✨ Pruébala
El indicador de progreso de lectura se coloca en la parte superior de la página con la posición fija. Para aprovechar las animaciones compuestas, no se anima width
, pero se reduce la escala del elemento 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 recurrirá a sus valores predeterminados.
El desplazador predeterminado que se debe rastrear es el nearest
, y el eje predeterminado es block
. Esto apunta eficazmente a la barra de desplazamiento raíz, ya que es la barra de desplazamiento más cercana al elemento #progress
, al tiempo que hace un seguimiento de la dirección de su 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, 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 con un identificador de tu gusto. El valor debe comenzar con --
.
Para ajustar el eje para el que se realizará el 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 paso 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 mirando la imagen una de tres. Cuando la última imagen está a la vista (determinada por la barra de desplazamiento que se desplazó 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 impulsar la animación.
✨ Pruébala
El lenguaje de marcado básico de 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á absolutamente posicionado dentro del elemento wrapper .gallery
. Su tamaño inicial se determina mediante 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 .gallery__scrollcontainer
establece los elementos .gallery__entry
contenidos de manera horizontal y es el elemento que se desplaza. Cuando se realiza el seguimiento de su posición de desplazamiento, se anima el .gallery__progress
. Para ello, se debe hacer referencia al cronograma del progreso del desplazamiento --gallery__scrollcontainer
denominado.
@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 nueva instancia de la clase ScrollTimeline
. Pasa una bolsa de propiedad con el source
y el axis
de los que quieres hacer un seguimiento.
source
: Es una referencia al elemento del cual deseas hacer un seguimiento del desplazamiento. Usadocument.documentElement
para orientar al desplazador raíz.axis
: Determina a qué eje se debe hacer el seguimiento. Al igual que la variante de CSS, los valores aceptados sonblock
,inline
,x
yy
.
const tl = new ScrollTimeline({
source: document.documentElement,
});
Para adjuntarlo a una animación web, pásala como la propiedad timeline
y omite cualquier duration
si hubiera.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
Demostración: Indicador de progreso de lectura, revisado
Para volver a crear el indicador de progreso de lectura con JavaScript mientras usas 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: la timeline
creada hace un seguimiento del 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
Practica con el cronograma del progreso de visualización
Crea un cronograma del progreso de visualización 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 esblock
. - 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 oauto
, dondeauto
es 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)
. 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, cada img
tendrá un fundido de entrada a medida que cruce el viewport durante el desplazamiento.
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo: Cómo 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 sale de él 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.
Los posibles intervalos de cronogramas de visualización a los que te puedes orientar son los siguientes:
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 de rango y un fin de rango. 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 del rango es un porcentaje que va de 0%
a 100%
, pero también puedes especificar una longitud fija, como 20em
.
Por ejemplo, si quieres ejecutar una animación desde el momento en que un objeto ingresa, elige entry 0%
como inicio del intervalo. Para finalizar en el momento en que el sujeto ingresó, selecciona entry 100%
como valor para el final del intervalo.
En CSS, esto se configura 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 qué 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 en cover 50%
. Luego, arrastra la barra de desplazamiento para ver el resultado de la animación.
Mira una grabación
Como puedes notar al explorar las herramientas de visualización de intervalos de cronograma, algunos rangos se pueden seleccionar con dos combinaciones diferentes de nombre de rango y desplazamiento de rango. Por ejemplo, entry 0%
, entry-crossing 0%
y cover 0%
se orientan a la misma área.
Cuando el rango de inicio y finalización del rango tienen como objetivo el mismo nombre de rango y abarcan todo el rango (de 0% a 100%), puedes acortar el valor para simplemente el nombre del rango. Por ejemplo, animation-range: entry 0% entry 100%;
se puede reescribir a animation-range: entry
, que es mucho más corto.
Demostración: Revelación de imagen
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 vistas anónimas. Se ajustó el rango de animación para que cada imagen tenga la opacidad completa cuando se encuentre en la mitad de la barra de desplazamiento.
✨ Pruébala
El efecto de expansión se logra mediante el uso de 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%;
}
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 visualización con nombre. En lugar de las propiedades 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
Cuando se vuelve a trabajar en la demostración de revelación de imagen 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 realizará un seguimiento del elemento dentro de su barra de desplazamiento más cercana. Luego, se usa el mismo valor como valor de la propiedad animation-timeline
. El resultado visual es exactamente el mismo que antes.
✨ Pruébala
Cómo crear un cronograma del progreso de visualización en JavaScript
Para crear un cronograma de visualización en JavaScript, crea una nueva instancia de la clase ViewTimeline
. Pasa una bolsa de propiedad con el subject
que deseas rastrear, axis
y inset
.
subject
: Es una referencia al elemento que deseas rastrear dentro de su propio desplazador.axis
: Es el eje para realizar un seguimiento. Al igual que la variante de CSS, los valores aceptados sonblock
,inline
,x
yy
.inset
: Es un ajuste de inserción (positivo) o de inicio (negativo) del puerto de desplazamiento cuando se determina si el cuadro está a la vista.
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
Para adjuntarlo a una animación web, pásala como la propiedad timeline
y omite cualquier duration
si hubiera. De manera opcional, pasa 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
Más opciones para probar
Adjuntar a varios intervalos de cronogramas de visualización con un conjunto de fotogramas clave
Echemos un vistazo a esta demostración de lista de contactos donde las entradas de la lista están animadas. A medida que una entrada de lista ingresa al puerto de desplazamiento desde la parte inferior, se desliza y se atenúa, y, cuando sale del puerto de desplazamiento en la parte superior, se desliza y desaparece.
✨ Pruébala
Para esta demostración, cada elemento se decora con un cronograma de visualización que lo hace a medida que cruza su puerto de desplazamiento, pero se adjuntan dos animaciones basadas en desplazamiento. La animación animate-in
se adjunta al rango entry
del cronograma y la animación animate-out
al rango 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 unidas a dos intervalos distintos, 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 rango, no es necesario que especifiques el animation-range
. El resultado es exactamente el mismo que antes.
✨ Pruébala
Cómo adjuntar a un cronograma de desplazamiento no principal
El mecanismo de búsqueda para cronogramas de desplazamiento con nombre y cronogramas de visualización se limita a los principales de desplazamiento únicamente. Sin embargo, con frecuencia, el elemento que se debe animar no es un elemento secundario del desplazador que se debe rastrear.
Para que esto funcione, entra en juego la propiedad timeline-scope
. Usarás esta propiedad para declarar una línea de tiempo con ese nombre sin crearla. Esto le dará un alcance más amplio a la línea de tiempo con ese nombre. En la práctica, se usa la propiedad timeline-scope
en un elemento superior compartido para que se pueda adjuntar el cronograma de un desplazamiento secundario 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:
- El elemento
.parent
declara un cronograma con el nombre--tl
. Cualquier elemento secundario puede encontrarlo y usarlo como valor para la propiedadanimation-timeline
. - En realidad, 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 configuró comoscroll-timeline-root
, se adjunta a él. - El elemento
.subject
usa el cronograma--tl
. Camina hasta su árbol principal y encuentra--tl
en.parent
. Con la--tl
del.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 un cronograma hacia un principal (también conocido como elevación) para que todos los elementos secundarios del principal puedan acceder a él.
La propiedad timeline-scope
se puede usar tanto con cronogramas de desplazamiento como con cronogramas de visualización.
Más demostraciones y recursos
Todas las demostraciones que se abordan en este artículo en el minisitio desplazado-animaciones.style El sitio web incluye muchas más demostraciones para destacar lo que se puede lograr con las animaciones basadas en desplazamientos.
Una de las demostraciones adicionales es esta lista de portadas de álbumes. Cada portada gira en 3D a medida que toma el foco central.
✨ Pruébala
También puedes ver esta demostración de tarjetas apiladas que aprovechan position: sticky
. A medida que se apilan las cartas, las ya estancadas se reducirán, lo que creará un buen efecto de profundidad. Al final, toda la pila se desliza fuera de la vista como grupo.
✨ Pruébala
En scroll-driven-animations.style, también se incluye una colección de herramientas como la visualización del progreso del intervalo 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 Web Animations en Google I/O 2023.