Animação de texto para redes sociais: 4 estilos essenciais

Em posts sociais, quatro estilos de animação de texto fazem quase tudo: subir (as palavras flutuam para cima e surgem com fade, calmo e premium), pop (as palavras crescem com um pequeno salto, curto e forte), cortina (uma linha é revelada de um lado, como um pano) e máquina de escrever (as letras aparecem uma a uma, como se estivessem sendo escritas agora). Combine o estilo com a mensagem, mantenha cada entrada abaixo de uns três quartos de segundo e depois deixe as palavras paradas o tempo de ler duas vezes. Um estilo por post. Isso é quase todo o ofício.

As quatro animações de texto num relance

Subir: o padrão seguro e premium

O estilo subir move cada linha uma curta distância para cima enquanto ela surge com fade, e depois a deixa assentar. Como o movimento é pequeno e desacelera, o olho lê as palavras quase assim que elas começam a aparecer. É o padrão certo para marcas que querem passar calma: hotéis, estúdios, skincare, arquitetura, consultorias.

Escalone as linhas em cerca de 100 a 150 milissegundos para que caiam em cascata. Escalone palavras só em linhas muito curtas; escalonar letras no estilo subir fica cheio de frescura.

Pop: para palavras curtas que precisam acertar em cheio

O pop cresce uma palavra a partir de um tamanho um pouco menor, passa um pouco do ponto e assenta. Tem energia, então combina com palavras que você quer que acertem: um preço, uma porcentagem, "Esgotado", "Hoje à noite", "Último dia". Falha em frases longas, que balançam em vez de acertar.

Cortina: revele um título como um pano que se abre

A cortina descobre uma linha de uma borda à outra, então as palavras aparecem na ordem de leitura sem se mover. Parece deliberada e cinematográfica e, como as letras ficam paradas, é uma das entradas mais legíveis. Use para títulos, para uma linha de "antes" apagada para revelar um "depois", ou para um nome revelado no fim de um vídeo.

Passe a cortina no sentido da leitura: da esquerda para a direita em português e na maioria das línguas europeias. Uma cortina contra o sentido da leitura parece que o texto está sendo tirado de você.

Máquina de escrever: palavras escritas na hora

A máquina de escrever revela as letras uma de cada vez. É mais lenta que as outras três, e esse é o ponto: faz uma linha parecer pessoal, como se alguém escrevesse para você agora. Use em perguntas, citações curtas, dicas e notas de bastidores. Mantenha a linha curta, porque a frase inteira precisa terminar de ser digitada antes de as pessoas poderem lê-la, e ainda precisa de uma pausa.

Como escolher a animação de texto certa

1. 1

   Comece pela mensagem

   Notícia calma sobe. Notícia urgente faz pop. Uma revelação usa cortina. Um recado pessoal é digitado.

2. 2

   Conte as palavras

   De uma a três palavras aceitam qualquer estilo. Linhas longas ficam melhores com subir ou cortina; evite pop e máquina de escrever.

3. 3

   Escolha um estilo por post

   Misturar entradas num mesmo quadro parece modelo se exibindo. A consistência é o que faz o movimento parecer da marca.

4. 4

   Defina a pausa

   Depois que a última palavra assenta, segure o quadro o tempo de ler duas vezes. Os stories avançam sozinhos, então isso importa mais nos Stories do Instagram.

5. 5

   Assista no mudo, no celular

   É assim que muitos dos seus espectadores vão ver. Se alguma linha for difícil de pegar, desacelere ou corte palavras.

Animações de texto em CSS para copiar

Num site, os mesmos quatro estilos levam poucas linhas de CSS cada. Mantenha-os curtos, execute uma vez e desligue 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 quanto as durações; suavização de movimento explica por que subir deve desacelerar e pop deve passar do ponto. Para o ofício mais amplo de tipografia em movimento, veja tipografia cinética.

Animando texto no Gradiently

O Studio do Gradiently tem essas quatro animações de texto, subir, pop, cortina e máquina de escrever, para qualquer camada de texto, sobre um Mark que pode se mover devagar atrás das palavras. O Mark mantém sua área mais calma sob o texto enquanto se move, então as linhas continuam legíveis durante toda a animação. Com o Pro, você exporta stories e Reels como GIF, ou como MP4 ou WebM onde o navegador permite gravação. Stories animados do Instagram e GIF ou MP4 ajudam a escolher o formato.