Animar sin marear — prefers-reduced-motion en la práctica

Para algunas personas, el movimiento en pantalla no es un detalle estético: puede provocar mareo, náuseas o dolores de cabeza. Los sistemas operativos tienen una preferencia de "reducir movimiento", y la web la expone con la media query prefers-reduced-motion. Respetarla es una obligación de oficio, no un extra.

Reducir no es eliminar

El error más común es apagarlo todo. Una interfaz sin ninguna señal de cambio también es difícil de usar: la persona no entiende qué ocurrió. La regla práctica es sustituir el movimiento amplio por cambios que no desplazan nada:

• Un desplazamiento de 40 px se convierte en un fundido de opacidad.
• Un parallax se convierte en una imagen fija.
• Una transición de página con barrido pasa a un fundido corto o a ninguna.
• Los bucles infinitos se detienen en su fotograma más representativo.

En CSS

La forma más segura es declarar primero la versión sin movimiento y añadir el movimiento solo cuando se acepta.

.card {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

Con este orden, si el navegador no entiende la media query o falla el script, el contenido se ve igual.

En GSAP

gsap.matchMedia() permite definir ramas por preferencia y se encarga de limpiar al cambiar.

const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".hero-line", { yPercent: 110, stagger: 0.09, ease: "power4.out" });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.set(".hero-line", { opacity: 1 });
});

Un detalle fácil de olvidar

Si ocultas elementos con CSS para animarlos después, ese estado oculto solo debe existir cuando el movimiento está permitido. En nuestros sitios, un script en el head añade una clase motion al elemento html y el CSS de estados iniciales cuelga de ella. Sin la clase (movimiento reducido o JavaScript desactivado), todo se ve desde el principio.

Qué probar

1. Activa "Reducir movimiento" en tu sistema y recorre cada página.
2. Verifica que ningún contenido quede oculto.
3. Comprueba que los estados (hover, foco, error, carga) siguen siendo distinguibles.

Una interfaz accesible no es una interfaz sin movimiento: es una interfaz que sabe moverse menos cuando se lo piden.