El movimiento puede hacer que una interfaz se sienta viva, o que parezca una presentación de diapositivas. La diferencia es si el movimiento transmite información.
Pregunta qué dice el movimiento
Para cada animación, completa la frase: “esto se mueve para que quien lo ve entienda…”. Si no puedes, es decoración. Una pestaña que se desliza dice “existe una pestaña nueva”. Un interruptor que cambia dice “este ajuste cambió”.
Ata la secuencia al scroll cuando la secuencia es el punto
Cuando una historia tiene orden — primero esto, luego aquello — el scroll es una línea de tiempo natural. Quien mira controla el ritmo, puede volver atrás y nada se reproduce sin esa persona. Para todo lo demás, una revelación simple basta.
Quédate en las propiedades baratas
Anima transform y opacity. Se ejecutan en el compositor y mantienen la página a 60 fotogramas por segundo. Evita animar propiedades de layout en cualquier cosa que haga scroll.
Respeta a quienes lo desactivan
Respeta prefers-reduced-motion. Muestra los estados finales, conserva la información, quita el movimiento. Un buen diseño de movimiento sobrevive a que se le quite el movimiento.