Scroll-Triggered Animation

El progreso de la animación está ligado directamente a la posición del scroll, así que al avanzar o retroceder se reproduce o se rebobina.

Añade una "Scroll-Linked Animation" (también llamada scroll-driven animation o scroll scrub) en [dónde].
La animación debe moverse exactamente con la posición del scroll: al bajar avanza y al subir se rebobina al instante, sin un suavizado temporal propio.
Asigna toda la animación a un tramo de scroll claro y muestra un estado estático razonable si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento sube una distancia corta mientras aparece, como si se asentara en su lugar.

Añade una animación de entrada "Fade Up" (también llamada fade-in-up o reveal on scroll) en [dónde].
Los elementos deben subir ligeramente mientras aparecen la primera vez que entran en pantalla al hacer scroll: sutil y rápido, sin rebote.
Reprodúcela una sola vez y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos de un grupo se animan uno tras otro con un pequeño retraso, formando una ola en lugar de aparecer todos a la vez.

Añade una animación "Stagger" (también llamada staggered animation o cascada) en [dónde].
Los elementos deben aparecer subiendo uno tras otro con un retraso corto y uniforme, para que el grupo se vea como una ola rápida y no todos a la vez.
Mantén la secuencia breve aunque la lista sea larga, reprodúcela una sola vez al entrar en pantalla y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las palabras de un párrafo pasan de atenuadas a opacidad total a medida que el usuario hace scroll.

Añade un efecto "Text Reveal" (también llamado scroll text reveal o word-by-word reveal) en [dónde].
El párrafo debe empezar atenuado y, a medida que el usuario hace scroll, cada palabra debe iluminarse del todo una tras otra, vinculada a la posición del scroll.
Al volver a subir, las palabras deben atenuarse de nuevo, y el párrafo completo debe seguir disponible para los lectores de pantalla sea cual sea su atenuación.

El scroll y los saltos a anclas se deslizan con suavizado en lugar de moverse de golpe.

Añade un scroll suave (Smooth Scroll, también llamado smooth scrolling o inertia scroll) en [dónde].
El scroll y los saltos a anclas deben deslizarse y frenar suavemente en lugar de moverse a saltos, con una sensación ligera y ágil, no con un retraso pesado.
Mantén el comportamiento nativo, como el scroll con teclado, la barra de desplazamiento y la búsqueda en la página, y desactiva el suavizado si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las tarjetas se quedan fijas arriba al hacer scroll y se apilan unas sobre otras, a menudo encogiendo las anteriores.

Añade "Stacking Cards" (también llamadas sticky stacking cards o card stack scroll) en [dónde].
Al hacer scroll, cada tarjeta debe quedarse fija cerca de la parte superior y la siguiente debe subir por encima, mientras las de debajo se encogen un poco para formar una pila ordenada.
Deja visible un borde fino de cada tarjeta anterior y da a la última espacio suficiente para llegar a su sitio antes de que termine la sección.

Un encabezado fijo reduce su altura o tamaño cuando el usuario baja por la página.

Añade un "Sticky Header Shrink" (también llamado shrinking header o shrink on scroll) en [dónde].
El encabezado debe quedarse arriba y, en cuanto el lector baje un poco, encogerse suavemente hasta una barra más delgada con un logo más pequeño, y volver a crecer al regresar arriba del todo.
Evita que el contenido de abajo salte mientras el encabezado cambia de tamaño.