Animazioni di testo social: rise, pop, wipe e macchina da scrivere

Per i post social, quattro stili di animazione del testo fanno quasi tutto: rise (le parole salgono dolcemente e appaiono in dissolvenza, calmo e premium), pop (le parole crescono con un piccolo rimbalzo, breve e deciso), wipe (una riga viene svelata da un lato, come un sipario) e macchina da scrivere (le lettere compaiono una a una, come scritte adesso). Abbina lo stile al messaggio, tieni ogni entrata sotto circa tre quarti di secondo, poi lascia le parole ferme abbastanza a lungo da leggerle due volte. Un solo stile per post. È la maggior parte del mestiere.

Le quattro animazioni di testo a colpo d’occhio

Rise: il valore predefinito sicuro e premium

Rise sposta ogni riga di poco verso l’alto mentre appare in dissolvenza, poi la lascia assestarsi. Poiché il movimento è piccolo e rallenta, l’occhio legge le parole quasi appena iniziano a comparire. È la scelta predefinita giusta per i brand che vogliono sembrare calmi: hotel, studi, skincare, architettura, consulenze.

Sfasa le righe di circa 100-150 millisecondi perché scendano a cascata. Sfasa le parole solo per righe molto brevi; sfasare le lettere con rise appare troppo ricercato.

Pop: per parole brevi che devono colpire

Pop ingrandisce una parola partendo da un po’ più piccola, supera di poco la misura e si assesta. Ha energia, quindi va bene per le parole che vuoi far arrivare: un prezzo, una percentuale, «Esaurito», «Stasera», «Ultimo giorno». Non regge sulle frasi lunghe, che ondeggiano invece di colpire.

Wipe: svela un titolo come un sipario

Wipe scopre una riga da un bordo all’altro, così le parole compaiono nell’ordine di lettura senza muoversi. Sembra deliberato e cinematografico e, poiché le lettere stesse restano ferme, è una delle entrate più leggibili. Usalo per i titoli, per una riga «prima» cancellata per svelare un «dopo», o per un nome svelato alla fine di un video.

Fai il wipe nel verso della lettura: da sinistra a destra per l’italiano e la maggior parte delle lingue europee. Un wipe contro il verso di lettura dà l’impressione che il testo venga portato via.

Macchina da scrivere: parole scritte nel momento

La macchina da scrivere svela le lettere una alla volta. È più lenta delle altre tre, ed è proprio questo il punto: rende una riga personale, come se qualcuno ti stesse scrivendo adesso. Usala per domande, citazioni brevi, consigli e note dietro le quinte. Tieni la riga corta, perché l’intera frase deve finire di essere digitata prima che la si possa leggere, e poi serve comunque una pausa.

Scegliere l’animazione di testo giusta

1. 1

   Parti dal messaggio

   Una notizia calma sale con rise. Una notizia urgente fa pop. Una rivelazione fa wipe. Una nota personale si digita.

2. 2

   Conta le parole

   Da una a tre parole reggono qualsiasi stile. Le righe lunghe vanno meglio con rise o wipe; evita pop e macchina da scrivere.

3. 3

   Scegli uno stile per post

   Mescolare le entrate in un solo fotogramma sembra un template che si mette in mostra. La coerenza è ciò che fa sembrare il movimento di marca.

4. 4

   Imposta la pausa

   Dopo che l’ultima parola si è assestata, tieni il fotogramma abbastanza a lungo da leggere due volte. Le storie avanzano da sole, quindi conta soprattutto nelle storie di Instagram.

5. 5

   Guardala senza audio su un telefono

   È così che la vedranno molti dei tuoi spettatori. Se una riga è difficile da cogliere, rallentala o taglia parole.

Animazioni CSS del testo da copiare

Su un sito, gli stessi quattro stili richiedono poche righe di CSS ciascuno. Tienili brevi, eseguili una volta sola e disattivali per chi preferisce meno movimento.

/* 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; }
}

Le curve contano quanto le durate; l’easing spiega perché rise dovrebbe rallentare e pop dovrebbe superare la misura. Per l’arte più ampia del testo in movimento, vedi la tipografia cinetica.

Animare il testo in Gradiently

Lo Studio di Gradiently ha queste quattro animazioni di testo, rise, pop, wipe e macchina da scrivere, per qualsiasi livello di testo, sopra un Mark che può muoversi lentamente dietro le parole. Il Mark tiene la sua area più calma sotto il testo mentre si muove, così le righe restano leggibili per tutta l’animazione. Con Pro esporti storie e Reel come GIF, o come MP4 o WebM dove il browser supporta la registrazione. Le storie Instagram animate e GIF contro MP4 ti aiutano a scegliere il formato.