Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il suggerimento che segue
Una barra di strumenti con un solo suggerimento: passando da un pulsante all’altro non sparisce e ricompare, scivola sul nuovo pulsante su una molla, allungandosi nel verso in cui va, mentre cambia larghezza per le parole nuove e la sua punta indica già il pulsante d’arrivo.
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 follows</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/work-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tooltip that follows: a toolbar with one tooltip only, which glides from button to button on a spring,
stretching as it goes and changing its width to fit the new words -->
<div class="bar" data-bar data-autoclic>
<div class="bar__tools" role="toolbar" aria-label="Formatting" data-tools></div>
<div class="tip" aria-hidden="true" data-tip>
<div class="tip__in" data-tip-in>
<span class="tip__body" data-tip-body></span>
<span class="tip__tail" data-tip-tail></span>
</div>
</div>
</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.
12 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 segue» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una barra di strumenti bianca sospesa, con i pulsanti disegnati a linea: grassetto, corsivo, sottolineato, link, elenco, immagine, annulla e ripeti, divisi da linee sottili. Fermando il puntatore su un pulsante, dopo un attimo sopra di lui sale un suggerimento scuro col nome e i tasti (Bold, Cmd B, o Ctrl su Windows); spostandosi lungo la barra, il suggerimento scivola sul pulsante nuovo su una molla, allungandosi un poco nel verso in cui va e assottigliandosi, cambia larghezza per stare alle parole nuove, le vecchie escono da una parte e le nuove entrano dall’altra, e la punta indica già il pulsante d’arrivo. Uscendo dalla barra sfuma; tornandoci subito dopo, compare senza aspettare. Grassetto, corsivo e sottolineato restano premuti in lilla quando li si clicca, con un piccolo balzo del disegno.
Come funziona
Un solo suggerimento
È un elemento solo per tutti i pulsanti: lo script lo mette sopra il centro del pulsante (offsetLeft più metà della larghezza), nelle coordinate della barra, e lo tiene dentro lo schermo; GSAP gli dà x e y a ogni fotogramma.
La molla e l’allungamento
La posizione segue il pulsante scelto su una molla (SPRING), calcolata sul ticker di GSAP a passi di 4 millisecondi; la velocità della molla allunga il corpo (scaleX 1 + velocità × STRETCH, fino a 1,2, e un poco più sottile). La punta è sul pulsante d’arrivo, così lo indica prima che il suggerimento arrivi.
Parole nuove
Le parole sono uno span messo al centro del corpo (xPercent −50): il vecchio esce di 18 pixel dall’altra parte e sfuma in 0,11 secondi, il nuovo entra da 18 pixel dalla parte da cui viene il suggerimento; la larghezza del corpo va a quella delle parole nuove in 0,32 secondi.
Quando compare
La prima volta aspetta DELAY secondi del puntatore su un pulsante, poi sale (scale da 0,86, da 6 pixel più giù, back.out); uscendo dalla barra sfuma, e per GRACE secondi un pulsante nuovo lo mostra subito. Coi tasti le frecce si muovono lungo la barra (una sola fermata con Tab), il suggerimento segue subito la focalizzazione ed Esc lo nasconde; al telefono un tocco lungo lo mostra e il dito può scorrere lungo i pulsanti.
Che cosa sentono i lettori di schermo
Il suggerimento ripete soltanto quello che dicono i pulsanti: ognuno ha aria-label e aria-keyshortcuts, e quelli che restano premuti aria-pressed; il suggerimento è aria-hidden. Un clic da script (l’anteprima della libreria) è un puntatore finto: si ferma su un pulsante, si sposta lungo la barra premendone uno ogni tanto, ed esce.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DELAY | script.js | 0.45 | I secondi in cui il puntatore resta su un pulsante prima del primo suggerimento. |
SPRING | script.js | [320, 0.72] | La molla del suggerimento quando scivola: quanto è rigida e quanto è frenata. |
STRETCH | script.js | 0.00012 | Quanto si allunga con la velocità. |
GRACE | script.js | 0.6 | I secondi dopo l’uscita dalla barra in cui torna senza aspettare. |
Quando usarla
Per le barre di strumenti di un editor, le icone di una dashboard, i comandi di un lettore video, una barra fatta di sole icone: ovunque un pulsante ha solo un disegno e un nome da dire.
Sul telefono
I pulsanti scendono a 36 pixel perché la barra stia nello schermo; un tocco lungo mostra il suggerimento senza premere il pulsante e il dito può scorrere lungo la barra; il suggerimento resta sempre dentro lo schermo.
Con il movimento ridotto
Il suggerimento salta da un pulsante all’altro senza molla né allungamento, compare e sparisce di colpo, senza salire, e le parole cambiano subito.
Trappole
- Un suggerimento per pulsante che si nasconde e ricompare a ogni passaggio lampeggia: uno solo che si sposta resta leggibile, e la punta che indica già il pulsante d’arrivo dice dove va.
- Due parole che si incrociano nello stesso riquadro si leggono insieme: la vecchia se ne va quasi del tutto (0,11 secondi) prima che la nuova compaia.
- Il tasto Cmd o Ctrl dipende dal sistema: qui si legge da navigator.platform, e si scrive in parole, senza simboli speciali.
- Al telefono un tocco lungo apre il menu del sistema: -webkit-touch-callout none sui pulsanti e il contextmenu fermato.
Librerie
GSAP 3.15.0, Work Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,8 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.
