Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
La chat che risponde
Una chat con Nora, che affitta una casa sul lago: il messaggio inviato vola da dove è stato scritto, la casella o il suggerimento toccato, fino alla sua nuvoletta mentre gli altri salgono; poi una nuvoletta piccola mostra Nora che scrive, con una riga che si scrive da sola, e si allarga nella sua risposta.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The chat that answers</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mulish@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the chat that answers: a message flies from where it was written into its bubble while the others move up,
and the answer grows out of the little bubble that shows the other person writing -->
<section class="chat" aria-label="Chat with Nora" data-chat data-autoclic>
<header class="chat__head">
<span class="chat__avatar" aria-hidden="true">N</span>
<div>
<h2 class="chat__name">Nora</h2>
<p class="chat__where">Casa del Lago · usually replies in minutes</p>
</div>
</header>
<div class="chat__thread" data-scroll>
<div class="chat__log" role="log" aria-live="polite" data-log></div>
</div>
<div class="chat__quick" role="group" aria-label="Suggested messages" data-quick></div>
<form class="chat__composer" data-form>
<label class="sr" for="chat-input">Message Nora</label>
<input class="chat__input" id="chat-input" type="text" placeholder="Message" autocomplete="off" autocorrect="off" enterkeyhint="send" maxlength="160" data-input>
<button class="chat__send" type="submit" aria-label="Send" disabled data-send>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5.5M6.5 11 12 5.5l5.5 5.5"/></svg>
</button>
</form>
</section>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
24 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «La chat che risponde» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un riquadro scuro: in alto il tondo con la N, Nora e Casa del Lago · usually replies in minutes; sotto, tre messaggi (i suoi a sinistra in grigio, i miei a destra in blu, con Read sotto l’ultimo), una fila di suggerimenti (We arrive around 6, Can we check in early?, Is breakfast included?) e la casella Message con un pulsante tondo. Scrivendo, il pulsante si accende e la freccia ci sale dentro con un rimbalzo. Inviando (Invio, il pulsante o un suggerimento), il messaggio vola da dove era scritto alla sua nuvoletta in fondo alla conversazione, su una curva, prendendo il blu per strada, mentre i messaggi sopra salgono a fargli posto; sotto compare Delivered. Un attimo dopo Delivered diventa Read e si disegna una seconda spunta, e a sinistra spunta una nuvoletta piccola con una riga a onde che si scrive e si cancella da sola: Nora che scrive. Poi la nuvoletta si allarga nella risposta, le cui parole entrano una dopo l’altra. I suggerimenti usati spariscono e gli altri scivolano al loro posto.
Come funziona
Il volo
Il messaggio nuovo entra subito al suo posto, nascosto; una sua copia, sopra tutto (la conversazione la taglierebbe), parte da dove erano le parole e va verso la nuvoletta vera: x e y con due ease diverse (power2.inOut e power3.out) disegnano una curva, il fondo passa da trasparente al blu, e a ogni fotogramma la copia rimisura la nuvoletta, così la raggiunge anche se nel frattempo la conversazione si sposta. All’arrivo la copia sparisce e compare la nuvoletta vera.
Gli altri salgono
Prima di ogni messaggio nuovo si misura dove sta ogni messaggio; dopo (la conversazione è scesa fino in fondo), ognuno parte da dove era e torna a zero in 0,45 secondi con power3.out. I messaggi più vecchi, fuori vista, se ne vanno quando sono più di quattordici.
Nora che scrive
Dopo WAIT[0] secondi compare la nuvoletta piccola (scale da 0,5 con back.out) con una riga a onde: stroke-dasharray lungo quanto la riga e stroke-dashoffset da +L a −L, così si scrive e si cancella andando avanti, in loop. Dopo WAIT[1] secondi la nuvoletta lascia il posto alla risposta.
La risposta che si allarga
La risposta entra al suo posto ritagliata (clip-path inset) alla misura della nuvoletta piccola, dall’angolo che hanno in comune; il ritaglio si apre in GROW secondi, coi numeri su un oggetto a parte scritti a ogni fotogramma (un clip-path animato come testo salterebbe), mentre le parole entrano una dopo l’altra. Le risposte sono quelle dei suggerimenti (ANSWERS); a tutto il resto Nora risponde OTHER.
Tasti, lettori di schermo e anteprima
La conversazione è una regione role log, che i lettori di schermo leggono man mano, e ogni messaggio comincia con chi parla (You o Nora, nascosto alla vista); la nuvoletta di chi scrive e lo stato sono aria-hidden. I suggerimenti sono pulsanti, la casella è un form vero (Invio manda), e se un suggerimento usato aveva la focalizzazione, questa passa al primo rimasto. Un clic da script (l’anteprima della libreria) è un ospite finto: scrive un messaggio lettera per lettera e lo manda, oppure tocca un suggerimento, e aspetta la risposta; non prende mai la focalizzazione.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FLIGHT | script.js | 0.5 | I secondi del volo di un messaggio da dove è scritto al suo posto. |
WAIT | script.js | [0.5, 1.4] | I secondi prima che Nora cominci a scrivere, e per quanto scrive. |
GROW | script.js | 0.45 | I secondi in cui la nuvoletta piccola si allarga nella risposta. |
ANSWERS | script.js | [['We arrive around 6', 'Perfect, I’ll leave the key in the box by the door.'], …] | I suggerimenti e le risposte di Nora. |
OTHER | script.js | 'Noted, thanks! See you this evening.' | La risposta di Nora a tutto il resto. |
Quando usarla
Per l’assistenza di un sito, i messaggi fra un ospite e chi lo ospita, una chat di supporto, un assistente con le risposte pronte, la demo di un’app di messaggi.
Sul telefono
Il riquadro prende la larghezza dello schermo e la fila dei suggerimenti scorre di lato col dito; la casella è a 16 pixel, così Safari su iPhone non ingrandisce la pagina, e la tastiera mostra il tasto per inviare (enterkeyhint send).
Con il movimento ridotto
I messaggi compaiono subito al loro posto, senza volo, e gli altri si spostano senza scivolare; la nuvoletta di chi scrive resta ferma, la risposta compare intera e la seconda spunta compare senza disegnarsi.
Trappole
- Un elemento che vola dentro un contenitore che scorre viene tagliato ai suoi bordi: vola una copia appesa fuori, sopra tutto, mentre l’originale aspetta nascosto al suo posto.
- Se la meta si sposta durante il volo (gli altri messaggi salgono), la copia va verso la posizione misurata a ogni fotogramma, non verso quella dell’inizio.
- Un pulsante che sparisce mentre ha la focalizzazione la lascia sulla pagina, e chi usa i tasti si perde: la focalizzazione va passata a un pulsante vicino.
- Una riga con stroke-dasharray uguale alla sua lunghezza e stroke-dashoffset da +L a −L si scrive e poi si cancella andando avanti, senza tornare indietro.
Librerie
GSAP 3.15.0, Mulish (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,2 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
