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

[Canonical HTML page](https://gradiently.design/it/guide/text-animation-ideas)

Non servono cinquanta effetti. Quattro entrate, scelte bene e con i tempi giusti, bastano per storie, Reel, annunci e citazioni. Ecco quale usare e quando.

## The short version

- Rise, pop, wipe e macchina da scrivere sono quattro stili di animazione del testo che coprono la maggior parte dei post social.
- Rise va bene per messaggi calmi, premium ed editoriali; pop per parole brevi ed energiche come prezzi e offerte.
- Wipe svela una riga come un sipario e funziona per titoli e rivelazioni prima e dopo; la macchina da scrivere va bene per citazioni, domande e tutto ciò che deve sembrare scritto in quel momento.
- La maggior parte delle animazioni d’entrata si legge meglio tra circa un quarto e tre quarti di secondo, seguite da una pausa abbastanza lunga da leggere la riga due volte.
- Usa un solo stile di animazione in un post o in una serie, e sfasa le righe invece di animare ogni parola in modo diverso.

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

| Animazione | Sensazione | Usala per | Durata dell’entrata |
| --- | --- | --- | --- |
| Rise | Calma, sicura, premium | Titoli, lanci, citazioni, post editoriali | da 400 a 700 ms |
| Pop | Energica, giocosa, urgente | Prezzi, offerte, ganci di una parola, conti alla rovescia | da 250 a 400 ms |
| Wipe | Precisa, cinematografica, rivelatrice | Titoli, rivelazioni, prima e dopo | da 500 a 800 ms |
| Macchina da scrivere | Personale, curiosa, nel momento | Domande, citazioni, consigli, dietro le quinte | da 30 a 60 ms a lettera |

Punti di partenza per ogni stile. Più lento sembra più costoso; più veloce sembra più urgente. Esagera in un senso o nell’altro e la gente smette di leggere.

## 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.

Un post social verticale che annuncia una collezione autunnale, con sopratitolo, titolo e riga di dettaglio

Un post di lancio adatto a rise: prima il sopratitolo, poi il titolo, poi il dettaglio, ognuno un attimo dopo il precedente.

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.

Una storia verticale di saldi con le parole Ultimo giorno in caratteri grandi e Finisce a mezzanotte sotto

Due parole che fanno pop: brevi, urgenti, lette in un istante.

## 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.

Una storia verticale che chiede Cosa sforniamo venerdì, con spazio sotto per un sondaggio

Una domanda si presta alla macchina da scrivere: sembra digitata da una persona, in diretta, per te. Abbastanza corta da finire in circa un secondo.

> **Il conto della macchina da scrivere** A 40 ms a lettera, una riga di 30 lettere richiede 1,2 secondi per essere digitata, più circa due secondi di pausa. Una riga di quindici parole supera i tre secondi prima ancora che inizi la pausa, quindi taglia parole o dividile su più fotogrammi.

## Scegliere l’animazione di testo giusta

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. **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. **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. **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](https://gradiently.design/it/guide/instagram-story-design).
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.

### Evita

- Ogni riga con un’animazione diversa
- Lettere che ruotano, si ribaltano o rimbalzano di continuo
- Testo ancora in movimento quando la storia avanza
- Pop su una frase intera
- Testo animato sopra un video fitto e veloce

### Fai

- Uno stile per tutto il post o la serie
- Un’entrata, poi quiete
- Una pausa chiara prima del fotogramma successivo
- Pop su una-tre parole
- Uno sfondo calmo, in lento movimento, sotto le 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.

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

Imposta larghezza e steps della macchina da scrivere sul numero di caratteri della tua riga. Per righe con font proporzionali, rivela lettera per lettera con un piccolo script.

Le curve contano quanto le durate; l’[easing](https://gradiently.design/it/guide/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](https://gradiently.design/it/guide/variable-font-animation).

## 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](https://gradiently.design/it/guide/animated-instagram-story) e [GIF contro MP4](https://gradiently.design/it/guide/gif-vs-mp4) ti aiutano a scegliere il formato.

## FAQ

### Qual è la migliore animazione di testo per le storie di Instagram?

Rise è la scelta più sicura per la maggior parte delle storie. Usa pop per parole brevi e urgenti, wipe per le rivelazioni e la macchina da scrivere per domande o note personali.

### Quanto deve durare un’animazione di testo?

La maggior parte delle entrate si legge bene tra circa 250 e 800 millisecondi, seguite da una pausa abbastanza lunga da leggere la riga due volte.

### Come si fa l’effetto testo a macchina da scrivere?

Rivela un carattere alla volta a circa 30-60 millisecondi a lettera. In CSS, anima la larghezza di una riga monospace con steps() pari al numero dei caratteri.

### Devo usare animazioni di testo diverse nello stesso post?

Di solito no. Uno stile solo in un post, o in un’intera serie, appare voluto e di marca; mescolare gli stili appare confuso.