Motion Design para a Web Moderna

A animação na web tem um problema de reputação. Anos de uso excessivo — loaders a girar, texto a voar, botões a saltar — ensinaram os programadores a desconfiar dela. Mas o pêndulo oscilou longe demais. O bom motion design não é decoração. É comunicação.

O Movimento Comunica Estado

Quando um clique num botão não produz feedback imediato, o utilizador não sabe se a sua ação foi registada. Uma sutil transição de escala ou cor fecha esse ciclo instantaneamente. O movimento é a linguagem mais rápida para comunicar o estado do sistema a um humano.

O Timing É Tudo

A diferença entre uma animação que parece nativa e uma que parece desajeitada é normalmente o timing. As curvas de aceleração que aceleram rapidamente e desaceleram devagar parecem físicas. As transições lineares parecem mecânicas. Usa ease-out para elementos a entrar no ecrã. Usa ease-in para os que saem.

"A boa animação é invisível. Só a notas quando desaparece."

O Modelo Mental do Framer Motion

O Framer Motion facilita duas coisas: animação declarativa e animação de layout. A primeira trata de transições entre estados. A segunda trata de mudanças de posição ou tamanho causadas por alterações no DOM.

Quando Não Animar

Nem todas as mudanças de estado precisam de uma transição. Anima as coisas que os utilizadores precisam de notar. Deixa tudo o resto quieto.

Conclusão

O motion design bem feito é quase invisível. Guia a atenção, confirma ações e faz as interfaces parecerem vivas sem exigir ser notado. Essa contenção é o ofício.