Configuración de animaciones vinculadas al desplazamiento

Las animaciones vinculadas al desplazamiento se reproducen, pausan o invierten según la visibilidad del elemento. Algunos ejemplos son la aparición gradual de un hero cuando una sección entra en la vista, un número que aumenta mientras está visible y un efecto de parallax vinculado a la posición del desplazamiento. IntersectionObserver activa las animaciones, y CSS o Web Animations API las ejecuta.

El patrón más sencillo consiste en añadir una clase CSS que contenga la animación cuando un elemento entra en la ventana gráfica. En la función de callback del observador, use entry.target.classList.add("in-view"); la clase define animation: fade-in 600ms forwards.

Cree un observador compartido, observe cada elemento que tenga la clase de activación, añada "in-view" cuando se produzca la intersección y use unobserve para evitar que la animación vuelva a activarse. Para animaciones de una sola ejecución, esto es todo lo necesario; para repetirlas al volver a entrar, no use unobserve y quite la clase al salir.

Para mostrar los elementos de una lista de forma secuencial, aplique un retraso individual mediante una propiedad personalizada de CSS: style="--delay: ${i * 100}ms" en cada elemento; la animación lee animation-delay: var(--delay). Los elementos se animan en cascada cuando la lista entra en la vista.

threshold: 0.2 se activa cuando el 20 % del elemento es visible; normalmente es un buen momento para las animaciones "in-view". threshold: 0 se activa demasiado pronto, con cualquier píxel visible, y el resultado parece brusco; threshold: 1 se activa demasiado tarde, cuando el elemento está completamente visible, y produce una sensación de retraso.

Las animaciones activadas por el desplazamiento se reproducen una vez al producirse la intersección, como se explicó anteriormente. Las animaciones vinculadas al desplazamiento avanzan al mismo ritmo que la posición del desplazamiento. La opción moderna son las animaciones de CSS controladas por el desplazamiento (animation-timeline: scroll()), aunque IntersectionObserver sigue siendo útil para entrar en zonas de activación y salir de ellas.

Anime propiedades que la GPU pueda transformar de forma económica: transform y opacity. Evite animar top, left, width y height: estas propiedades provocan un recálculo del layout en cada fotograma, lo que hace que las animaciones vinculadas al desplazamiento se ejecuten entrecortadamente en dispositivos de gama media.

Incluya las declaraciones de animación dentro de @media (prefers-reduced-motion: no-preference) para que los usuarios que soliciten reducir el movimiento, por ejemplo debido a trastornos vestibulares o sensibilidad, reciban el estado final estático sin movimiento. Las animaciones decorativas deben deshabilitarse por completo cuando se ha solicitado reducir el movimiento.

Use un único observador compartido, no uno por elemento. Use unobserve cuando se haya ejecutado una animación de una sola ejecución. Utilice will-change con moderación: solo en los elementos que se estén animando en ese momento, y elimínelo cuando termine la animación. Consulte el panel Performance para detectar fotogramas perdidos.

Para las animaciones que deben invertirse cuando el elemento sale de la ventana gráfica, no use unobserve. En la función de callback, alterne la clase según isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting). La animación avanza al entrar y se invierte al salir.

Para las animaciones controladas mediante JavaScript, sustituya classList.add por entry.target.animate(keyframes, options). WAAPI devuelve un objeto Animation que puede pausar, invertir o encadenar mediante promesas; es más flexible que CSS para secuencias complejas.

¿Por qué se prefiere animar transform y opacity en lugar de top, left, width y height en las animaciones vinculadas al desplazamiento?

Las animaciones vinculadas al desplazamiento combinan IntersectionObserver con clases de animación de CSS o WAAPI. Defina un estado oculto, añada "in-view" cuando se produzca la intersección, anime transform y opacity, no top ni left, respete prefers-reduced-motion y escalone los elementos mediante propiedades personalizadas de CSS para crear apariciones en cascada. Para animaciones cuyo progreso dependa completamente del desplazamiento, considere las animaciones nativas controladas por el desplazamiento (animation-timeline: scroll()).