Animações de texto: subir, saltar, varrer e máquina de escrever

Para posts de redes sociais, quatro estilos de animação de texto fazem quase tudo: subir (as palavras flutuam para cima e surgem em fade, calmo e premium), saltar (as palavras crescem com um pequeno ressalto, curto e forte), varrer (uma linha é revelada de um lado, como uma cortina) e máquina de escrever (as letras surgem uma a uma, como se estivessem a ser escritas agora). Ajusta o estilo à mensagem, mantém cada entrada abaixo de cerca de três quartos de segundo e depois deixa as palavras paradas o suficiente para as leres duas vezes. Usa um estilo por post. Isso é quase todo o ofício.

As quatro animações de texto de relance

Subir: a predefinição segura e premium

Subir move cada linha uma curta distância para cima enquanto surge em fade e depois deixa-a assentar. Como o movimento é pequeno e desacelera, o olhar lê as palavras quase assim que começam a aparecer. É a predefinição certa para marcas que querem parecer calmas: hotéis, estúdios, cuidados da pele, arquitetura, consultoras.

Escalona as linhas cerca de 100 a 150 milissegundos para caírem em cascata. Escalona palavras só em linhas muito curtas; escalonar letras com subir parece trabalhoso.

Saltar: para palavras curtas que têm de aterrar

Saltar faz crescer uma palavra a partir de um tamanho ligeiramente menor, passa um pouco e assenta. Tem energia, por isso serve palavras que queres que acertem: um preço, uma percentagem, “Esgotado”, “Esta noite”, “Último dia”. Falha em frases longas, que tremem em vez de aterrar.

Varrer: revela um título como uma cortina

Varrer descobre uma linha de uma borda à outra, por isso as palavras aparecem pela ordem de leitura sem se moverem. Parece deliberado e cinematográfico e, como as letras ficam paradas, é uma das entradas mais legíveis. Usa-o para títulos, para uma linha de “antes” varrida para revelar um “depois”, ou para um nome revelado no fim de um vídeo.

Varre no sentido da leitura: da esquerda para a direita em português e na maioria das línguas europeias. Um varrimento contra o sentido da leitura parece que o texto está a ser retirado.

Máquina de escrever: palavras escritas no momento

A máquina de escrever revela as letras uma a uma. É mais lenta do que as outras três, e é esse o objetivo: faz uma linha parecer pessoal, como se alguém te estivesse a escrever agora. Usa-a para perguntas, citações curtas, dicas e notas de bastidores. Mantém a linha curta, porque a frase inteira tem de acabar de ser escrita antes de as pessoas a poderem ler, e depois ainda precisa de uma pausa.

Escolher a animação de texto certa

1. 1

   Parte da mensagem

   As notícias calmas sobem. As urgentes saltam. Uma revelação varre. Uma nota pessoal escreve-se.

2. 2

   Conta as palavras

   De uma a três palavras aceitam qualquer estilo. As linhas longas funcionam melhor com subir ou varrer; evita saltar e máquina de escrever.

3. 3

   Escolhe um estilo por post

   Misturar entradas num só enquadramento parece um modelo a exibir-se. A coerência é o que faz o movimento parecer da marca.

4. 4

   Define a pausa

   Depois de a última palavra assentar, mantém o enquadramento o suficiente para ler duas vezes. Os stories avançam sozinhos, por isso isto importa mais nos stories do Instagram.

5. 5

   Vê-o em silêncio num telemóvel

   É assim que muitos dos teus espectadores o vão ver. Se alguma linha for difícil de apanhar, abranda-a ou corta palavras.

Animações de texto em CSS para copiar

Num site, os mesmos quatro estilos precisam de poucas linhas de CSS cada um. Mantém-nos curtos, executa-os uma vez e desliga-os para quem prefere movimento reduzido.

/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}

As curvas importam tanto como as durações; easing explica porque subir deve desacelerar e saltar deve passar um pouco. Para o ofício mais amplo do texto em movimento, vê tipografia cinética.

Animar texto no Gradiently

O Studio do Gradiently tem estas quatro animações de texto, subir, saltar, varrer e máquina de escrever, para qualquer camada de texto, sobre um Mark que se pode mover devagar por trás das palavras. O Mark mantém a sua zona mais calma sob o texto enquanto se move, por isso as linhas continuam legíveis durante toda a animação. Com o Pro, exportas stories e Reels como GIF, ou como MP4 ou WebM quando o navegador suporta gravação. Stories animados do Instagram e GIF vs MP4 ajudam-te a escolher o formato.