Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
Il suggerimento che si srotola dalla parola
Un suggerimento (tooltip) nello stile minimal, su bianco: in una frase tre parole hanno sotto una riga tratteggiata, e fermandosi su una da lei si srotola un nastrino di carta stretto, col suo piccolo rotolo che corre avanti girando e le parole che compaiono mentre la carta si apre. Passando a un’altra parola il nastrino si riavvolge e si srotola lì.
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 tooltip that unrolls from the word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tooltip that unrolls from the word: three words of a coffee roaster's note are dotted underneath; resting
on one, a narrow strip of paper unrolls from the word, its little roll running ahead and the words of the
tooltip showing as the paper opens. Moving to another word, the strip rolls itself back up and unrolls there -->
<div class="note" data-note data-autoclic>
<p class="note__label">Mosslane Coffee</p>
<p class="note__text" data-text>
This week’s beans are <button class="term" type="button" aria-describedby="tip-washed" data-term>washed</button>,
<button class="term" type="button" aria-describedby="tip-rested" data-term>rested</button> for ten days
and best as a slow <button class="term" type="button" aria-describedby="tip-pour" data-term>pour-over</button>.
</p>
<p class="note__hint">Rest on an underlined word</p>
<div class="ribbon" data-ribbon aria-hidden="true">
<span class="ribbon__tip" data-tipmark></span>
<span class="ribbon__strip" data-strip>
<span class="ribbon__words" data-words></span>
</span>
<span class="ribbon__curl" data-curl></span>
<span class="ribbon__roll" data-roll></span>
</div>
<span class="tip-text" role="tooltip" id="tip-washed" data-tip>The fruit is washed off before the beans dry.</span>
<span class="tip-text" role="tooltip" id="tip-rested" data-tip>Left to breathe after roasting, for a sweeter cup.</span>
<span class="tip-text" role="tooltip" id="tip-pour" data-tip>Hot water poured by hand over a paper filter.</span>
</div>
</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.
27 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 «Il suggerimento che si srotola dalla parola» da Animorio e adattala al mio sitoCosa fa
Su bianco, sotto l’etichetta Mosslane Coffee, una frase in Newsreader dice che i chicchi della settimana sono washed, rested per dieci giorni e migliori in un pour-over lento. Le tre parole spiegate hanno sotto una riga tratteggiata sottile, grigia. Fermandosi su una, dopo un attimo da lei si srotola verso destra un nastrino di carta avorio alto 30 pixel, appena sopra la parola: un piccolo rotolo di carta, lucido sul davanti e più scuro ai lati, corre avanti girando, con le spire che scorrono, e getta un’ombra morbida sulla carta appena aperta; le parole del suggerimento compaiono mano a mano che la carta si apre. Arrivato in fondo il rotolo va un poco oltre e torna, e il nastrino si posa con un assestamento di un pixel; quando la carta ha raggiunto la parola compare la piccola punta che la indica, e le pieghe del rotolo si spengono piano. Intanto la parola si alza di un pixel e mezzo su una molla e la sua riga tratteggiata diventa una riga rossa piena che si disegna da sinistra. Passando a un’altra parola il nastrino si riavvolge in fretta nel suo rotolo e si srotola di nuovo sopra la nuova.
Come funziona
Un nastrino solo
C’è un solo nastrino per tutte le parole: la striscia di carta, il rotolo, l’ombra del rotolo e la punta. Per ogni parola lo script ci mette dentro il testo, misura quanto è largo e lo sposta sopra la parola, un po’ a sinistra, senza farlo uscire dal riquadro della nota.
Srotolare è un numero
Un numero da 0 a 1 dice quanto è aperta la carta: la striscia è larga quella parte della sua misura, il rotolo sta sul suo bordo destro e la sua ombra un po’ più indietro. GSAP porta il numero a 1 con back.out, così il rotolo va oltre e torna; le spire del rotolo scorrono con la strada fatta, e il rotolo è un poco più grosso quando ha ancora carta addosso.
Le parole sotto la carta
Il testo sta fermo dentro la striscia, che ha overflow hidden: allargandosi, la striscia lo scopre da sinistra. Il testo vero per chi usa un lettore di schermo è nell’elemento con role tooltip, collegato alla parola con aria-describedby.
La parola
La parola è un pulsante che sembra testo. La riga tratteggiata è un background a strisce di 3 pixel; quando il suggerimento è fuori diventa una riga piena rossa che cresce con background-size, e la parola si alza di LIFT pixel con una molla: niente cambio di peso, che allargherebbe la parola e sposterebbe la riga.
Passare da una parola all’altra
La prima volta il suggerimento aspetta DELAY secondi; se uno è appena uscito il prossimo parte subito. Cambiando parola, il nastrino si riavvolge in REWIND secondi e solo dopo si srotola sulla nuova. Coi tasti compare col focus, Esc lo rimette via; al telefono un tocco lo apre e lo chiude.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DELAY | script.js | 0.35 | I secondi in cui il puntatore resta su una parola prima del primo suggerimento. |
UNROLL | script.js | 0.8 | I secondi che il nastrino ci mette a srotolarsi. |
REWIND | script.js | 0.32 | I secondi che ci mette a riavvolgersi. |
OVERSHOOT | script.js | 1.3 | Quanto il rotolo va oltre la fine prima di tornare (0 si ferma di colpo). |
LIFT | script.js | 1.5 | Di quanti pixel si alza la parola mentre il suo suggerimento è fuori. |
GAP | script.js | 10 | Lo spazio fra la parola e il nastrino, in pixel. |
Quando usarla
Per i glossari dentro un testo: le parole del caffè o del vino sulla scheda di un prodotto, i termini di una documentazione, le voci di un contratto, le parole difficili di una lezione. Dove una parola ha bisogno di una riga di spiegazione senza far lasciare la pagina.
Sul telefono
La frase si stringe con la casella e va su più righe; il nastrino resta dentro il riquadro della nota e si apre col tocco su una parola, un altro tocco o un tocco altrove lo chiude.
Con il movimento ridotto
Niente rotolo che corre: il nastrino compare già aperto con una dissolvenza e la parola resta ferma.
Trappole
- Il testo del suggerimento va misurato dopo che i caratteri sono arrivati (document.fonts.ready), altrimenti il nastrino è più corto delle sue parole.
- La riga tratteggiata è una sfondo a strisce, non text-decoration dotted: i puntini veri si leggevano come pallini.
- Il peso della parola che cresceva la allargava e spostava le parole dopo: ora la parola si alza invece di ingrossarsi.
- Il clic dell’anteprima arriva sul riquadro della nota (el.click()): lì un puntatore finto passa su una parola e poi sulla successiva.
Librerie
GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,6 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
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.
