Capítulo 05
Movimento
Uma descida em corda tem uma assinatura própria: arranca com o peso, ganha velocidade e trava no fim, controlada. Nunca salta, nunca faz ricochete. É essa a única curva do sistema, e vem daí.
A curva
Duas, na verdade: uma para entrar e outra para sair. A de entrada é lenta a assentar, a de saída é rápida a desaparecer, porque ninguém precisa de ver uma coisa a ir-se embora.
Entrada · a descida
Tudo o que aparece usa esta. Arranca com força e assenta devagar.
--vu-descida: cubic-bezier(.16,1,.3,1)
Saída · o corte
Só para o que desaparece: fecho de aviso, modal, mensagem enviada.
--vu-saida: cubic-bezier(.7,0,.84,0)
Duração
140ms para resposta ao toque (botão, campo). 280ms para transição de estado. 560ms para uma entrada em cena. Nada no sistema passa de 560ms: acima disso deixa de parecer resposta e começa a parecer espera.
Seis padrões
Passe o rato por cima de cada um para o ver correr. São estes seis, e não se inventa um sétimo sem o acrescentar aqui.
01 · Descer
A entrada por omissão. Vem de cima, 14px, e assenta.
.vu-desce
02 · Largar corda
A linha desenha-se de cima para baixo antes do conteúdo chegar.
.vu-corda
03 · Acender
Neutro que vira âmbar. Só para confirmar uma ação.
transição de cor, 280ms
04 · Abrir
Menu, painel, resposta de FAQ. Desce e cresce ao mesmo tempo.
opacity + translateY + scale
05 · Sair
Cai e apaga-se, depressa. Usa a curva de saída.
380ms, --vu-saida
06 · Assentar
Desce, passa 6px e volta. O único excesso permitido, e só na entrada do herói.
700ms, uma vez por página
O que nunca se anima
Ressalto e elástico. Uma empresa que trabalha suspensa não faz nada saltar. Uma animação com bounce contradiz o produto.
Entradas a partir de baixo. O movimento da marca é descendente. Conteúdo que sobe do rodapé lê-se como outra empresa qualquer.
Números a contar sozinhos. O «5000+» não roda até ao valor. É um facto, não um espetáculo.
Fotografia com paralaxe. As fotos são prova de obra feita. Prova não se anima.
Acessibilidade, e não é opcional
Todo o movimento está dentro de prefers-reduced-motion. Quem tem essa preferência ligada recebe a página inteira, com tudo no sítio, sem uma única animação. Já está feito no ds.css: não é preciso lembrar-se disso a cada componente novo.