O movimento pode fazer uma interface parecer viva — ou parecer um slideshow. A diferença é se a movimentação carrega informação.
Pergunte o que o movimento diz
Para cada animação, complete a frase: “isto se move para que quem vê entenda…”. Se não conseguir, é decoração. Uma aba que desliza diz “existe uma nova aba”. Um interruptor que vira diz “esta configuração mudou”.
Amarre a sequência ao scroll quando a sequência é o ponto
Quando uma história tem ordem — primeiro isto, depois aquilo — o scroll é uma linha do tempo natural. Quem vê controla o ritmo, pode voltar, e nada toca sem a pessoa. Para todo o resto, uma revelação simples basta.
Fique nas propriedades baratas
Anime transform e opacity. Elas rodam no compositor e mantêm a página a 60 quadros por segundo. Evite animar propriedades de layout em qualquer coisa que role.
Respeite quem desliga o movimento
Honre prefers-reduced-motion. Mostre os estados finais, mantenha a informação, tire o movimento. Um bom design de movimento sobrevive à remoção do movimento.