A diferença entre uma animação boa e uma animação excelente

• Animação é um elemento central que define a qualidade da UI, indo além de apenas ser bonita ao fornecer uma sensação natural e interações intuitivas
• Para criar animações excelentes, é essencial ter consciência da origem, escolher o easing apropriado, aproveitar efeitos de mola e entender profundamente as ferramentas
• Em comparação com as funções padrão de easing do CSS, curvas de easing customizadas podem transmitir mais imersão e energia
• Com o hook useSpring do Framer Motion, interações baseadas na posição do mouse parecem mais realistas e suaves
• Quanto maior o entendimento das propriedades de CSS, mais fácil fica implementar novas animações de forma criativa ou melhorar animações existentes

---

Animações com consciência da origem

• Em um dropdown que abre ao clicar em um botão, um movimento que começa na posição do botão parece mais natural
• Em vez do padrão transform-origin: center, definir como bottom center produz um resultado visualmente mais natural
• Com Radix ou shadcn/ui, isso pode ser tratado automaticamente

  .radix-dropdown {  
    transform-origin: var(--radix-popover-content-transform-origin);  
  }  
  

Uso do easing apropriado

• ease-in-out costuma oferecer uma curva de aceleração e desaceleração mais natural do que ease-in na maioria dos casos
• Especialmente quando um elemento que já existe na tela está se movendo, é importante um movimento realista que arranca e para como um carro
• A recomendação padrão é ease-out, e mais detalhes podem ser vistos no link separado

Uso de curvas de easing customizadas

• Os easings padrão do CSS (ease-in, ease-out) têm pouca expressividade, o que enfraquece a sensação final
• ease é adequado para efeitos simples de hover, mas a maioria dos movimentos pede easing customizado
• Recursos recomendados:
  • easing.dev
  • easings.co

Interações baseadas em mola

• Se um elemento reagir imediatamente à posição do mouse, isso pode parecer artificial
• Com useSpring do Framer Motion, as mudanças de valor são refletidas gradualmente como uma mola, oferecendo movimentos mais realistas e suaves
• Isso é especialmente eficaz em animações mais decorativas, embora possa haver exceções em UIs funcionais

Entendimento das ferramentas

• Exemplo: ao alternar abas, a cor do texto e a barra de destaque devem transicionar juntas de forma natural
• Para isso, usar adequadamente recursos como clip-path ajuda a evitar que a animação fique estranha
• Inspeção quadro a quadro ou reprodução em câmera lenta ajudam a identificar diferenças sutis
• Com transformações 3D em CSS, também é possível criar efeitos como órbita e animações de loading em 3D

Por que isso importa?

• Hoje, a maior parte dos softwares já está funcionalmente boa o suficiente
• Para oferecer uma experiência diferenciada, é essencial ter uma UI gostosa de usar, e animação é o núcleo disso
• Entender quando, como e por que aplicar animações influencia fortemente a qualidade do produto
• Conteúdo mais aprofundado pode ser visto no curso Animations on the Web

[rhrnakrnakr]

O título e o conteúdo não combinam. Fui enganado.

[ndrgrd]

As animações são ótimas, mas há páginas demais em que a atenção acaba indo mais para a animação do que para o conteúdo.

Principalmente quando a animação chega a atrapalhar o fluxo da leitura, eu já fico irritado antes mesmo de começar a ler.