Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
L’avatar da assegnare
Nello stile minimal: a chi tocca un compito. Un posto vuoto disegnato da un cerchio tratteggiato e, sotto una riga sottile, la squadra in una fila di iniziali. Il volto scelto con un clic, un tocco o Invio sale dalla fila, vola nel posto riempiendosi d’inchiostro, si posa con un piccolo schiacciamento e l’anello blu gli si disegna intorno dal lato da cui è arrivato, mentre il nome accanto prende peso lettera per lettera. Si può anche trascinare a mano: vicino al posto una calamita lo tira dentro. La fila chiude il vuoto un volto dopo l’altro.
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 avatar to assign</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- who a task belongs to: an empty seat drawn with a dashed hairline, and under the rule the team in a row of
initials. A face chosen (a click, a tap, Enter, or dragged by hand) lifts out of the row, flies on an arc into
the seat filling with ink, lands with a small squash and the seat's ring draws round it in the accent; the name
beside the seat takes weight letter by letter. The faces are made by the script from PEOPLE -->
<div class="assign" role="group" aria-labelledby="assign-label" data-assign data-autoclic>
<div class="seat" aria-hidden="true" data-seat>
<svg class="seat__ring" viewBox="0 0 76 76" data-ring>
<circle class="seat__dash" cx="38" cy="38" r="36" data-dash/>
<circle class="seat__solid" cx="38" cy="38" r="36" data-solid/>
</svg>
<svg class="seat__plus" viewBox="0 0 16 16" data-plus><path d="M8 2.5v11M2.5 8h11"/></svg>
</div>
<div class="who">
<span class="who__label" id="assign-label" data-label>Assignee</span>
<span class="who__name" aria-hidden="true" data-name></span>
<span class="who__role" aria-hidden="true" data-role></span>
</div>
<span class="assign__rule" aria-hidden="true" data-rule></span>
<div class="team" role="group" aria-label="Team" data-team></div>
<p class="sr" aria-live="polite" data-live></p>
</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.
31 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 «L’avatar da assegnare» da Animorio e adattala al mio sitoCosa fa
Su una pagina bianca, a sinistra, un posto vuoto: un cerchio tratteggiato sottile e grigio con un piccolo più al centro. Accanto la parola Assignee, piccola e grigia, e sotto Unassigned, grande e leggera. Sotto una riga sottilissima c’è la squadra: cinque cerchi a filo nero con le iniziali MO, TL, IP, RS e JA. All’apertura la riga si disegna da sinistra, il cerchio tratteggiato gira al suo posto e i volti salgono uno dopo l’altro e si assestano. Col puntatore sopra un volto, il volto si alza di tre pixel, il suo filo si fa più spesso e accanto al posto compare il suo nome, chiaro e leggero, come una proposta. Al clic il nome si fa da parte e il volto sale dritto dalla fila, poi scivola nel posto crescendo fino alla sua misura, un poco inclinato nella direzione del volo e con un’ombra morbida sotto: per strada l’inchiostro si allarga dal centro del cerchio e le iniziali diventano bianche, più piene e più strette, come un monogramma. Si posa con un piccolo schiacciamento che rimbalza, il tratteggio sparisce e un anello blu si disegna intorno al volto partendo dal lato da cui è arrivato e chiudendosi dall’altra parte. Il nome entra lettera per lettera aprendosi in larghezza, prende peso da sinistra a destra con un piccolo colpo, e sotto compare il ruolo, Design lead. Intanto la fila chiude il vuoto: prima il volto accanto, poi gli altri. Scegliendo un altro volto, quello nel posto torna per primo a casa, scivolando fuori e scendendo nella fila che gli apre il posto, e il nuovo parte appena l’altro è in discesa, così i due non si incrociano mai. Cliccando il volto nel posto lo si toglie: l’anello si ritira, l’inchiostro si richiude al centro e il volto torna nella fila, e i vicini sentono il suo arrivo. Ogni volto si può anche trascinare: si solleva, si inclina seguendo il movimento e, vicino al posto, una calamita lo tira dentro, il cerchio tratteggiato si apre un poco e diventa nero e accanto compare il nome; lasciato lì, entra nel posto, lasciato lontano torna nella fila. Trascinando fuori il volto che sta nel posto lo si toglie.
Come funziona
Le misure in pixel e le molle fatte a mano
Tutto il componente è un riquadro in pixel calcolato dallo script con ROW_SIZE, SEAT_SIZE e GAP: il posto in alto a sinistra, il nome accanto, la riga e la fila sotto. Ogni volto è un button in posizione assoluta, grande come il posto e rimpicciolito nella fila con la scala (ROW_SIZE / SEAT_SIZE), così nel posto le iniziali sono nitide. x, y, scala e rotazione vanno al volto con quickSetter, da molle smorzate integrate a mano sul ticker di GSAP (accelerazione −k·distanza − 2ζ√k·velocità) col passo limitato a 1/30 di secondo e diviso in passi da 1/240. Quando tutto è fermo il ciclo si toglie dal ticker. Al resize le misure si ricalcolano e le molle portano i volti ai posti nuovi.
Il volo che non passa sopra niente
Il volo verso il posto è una curva di Bézier quadratica percorsa da un tween di GSAP: il punto di controllo sta fra il punto di mezzo e l’angolo (sopra il volto, all’altezza del posto), di quanto dice ARC. Con ARC vicino a 1 il volto sale dritto dalla fila, senza passare sopra i vicini, e poi scivola nel posto; tornando a casa fa il contrario, esce di lato e scende nel suo posto. La scala cresce lungo la strada con un piccolo rigonfiamento a metà (un seno), il volto si inclina di qualche grado nella direzione del volo e un’ombra morbida si accende e si spegne con i keyframes. Durante il volo il nome accanto al posto si fa da parte, perché il volo passa proprio dove è scritto: due cose non stanno mai una sopra l’altra.
L’inchiostro e le iniziali disegnate due volte
Il fondo nero del volto scelto è un cerchio con clip-path: circle() che GSAP porta da 0 al 51 per cento, dal centro verso il bordo. Le iniziali sono scritte due volte: in nero sul volto bianco e in bianco dentro l’inchiostro, ritagliate dallo stesso cerchio; così in ogni istante ogni pezzo di lettera si legge, anche quando il bordo dell’inchiostro le taglia a metà. Il peso e la larghezza delle iniziali (assi wght e wdth del Bricolage Grotesque, in variabili CSS sul pulsante) cambiano nel volo: nel posto sono più piene e più strette, come un monogramma. All’arrivo un piccolo schiacciamento (SQUASH) torna indietro con un elastico.
Il trascinamento e la calamita
Coi Pointer Events un volto si trascina dopo 6 pixel di movimento (prima è un clic); touch-action: none sui volti tiene fermo lo schermo sotto il dito. Il volto segue il puntatore con una molla più rigida, si ingrandisce un poco e si inclina con la sua velocità. Vicino al posto, entro MAGNET pixel, il punto da raggiungere viene tirato verso il centro del posto con un peso (1 − d / MAGNET)² · 0,6, così il volto si fa prendere. Abbastanza vicino il cerchio tratteggiato si apre e diventa nero e accanto compare il nome: lasciato lì entra nel posto, lontano torna nella fila. Il clic che segue un trascinamento viene ignorato.
Il nome, l’anello e la fila
Il nome è fatto di span, uno per lettera, con font-variation-settings scritto da due variabili CSS che GSAP fa correre: entra con wdth da 75 a 100 e un piccolo overshoot, poi prende peso da 330 a 640 una lettera dopo l’altra (STAGGER); il vecchio esce verso l’alto prima che entri il nuovo. L’anello è un solo tratto di un cerchio SVG con stroke-dasharray L, C − L e stroke-dashoffset L / 2, ruotato verso il punto da cui arriva il volto: cresce nei due versi fino a chiudersi. La fila prende i posti nuovi a turno: chiudendo un vuoto partono prima i vicini, aprendolo prima i più lontani, così nessuno urta quello accanto. Nello scambio il volto vecchio torna a casa per primo e il nuovo parte quando l’altro è in discesa.
Il giro dell’anteprima
Un clic da script sul componente (detail 0, l’anteprima della libreria) fa un giro intero in una timeline GSAP: un volto guardato e scelto, un secondo che prende il suo posto, il posto liberato, un terzo volto portato da una mano finta sopra la fila fino alla calamita, e di nuovo il posto vuoto, com’era all’inizio. I clic veri e la tastiera fermano il giro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
PEOPLE | script.js | [['Maya Ortiz', 'Design lead'], …] | La squadra: il nome e il ruolo di ognuno. Le iniziali vengono dal nome. |
START | script.js | -1 | Chi sta nel posto quando si apre la pagina: il suo numero in PEOPLE contando da 0, o −1 per nessuno. |
ROW_SIZE | script.js | 44 | Quanto è grande un volto nella fila, in pixel. |
SEAT_SIZE | script.js | 56 | Quanto è grande il volto nel posto, in pixel. |
GAP | script.js | 12 | Lo spazio fra due volti della fila, in pixel. |
FLIGHT | script.js | 0.64 | Quanto dura il volo fino al posto, in secondi (un volo corto dura meno). |
ARC | script.js | 0.9 | Quanto è squadrato il volo: verso 1 il volto sale dritto dalla fila e poi va di lato, più in basso taglia in diagonale. |
SPRING | script.js | [380, 0.7] | La molla dei volti: quanto è rigida e quanto è frenata (1 non rimbalza). |
MAGNET | script.js | 86 | Da quanti pixel il posto comincia a tirare dentro un volto trascinato. |
SQUASH | script.js | 0.07 | Quanto si schiaccia il volto quando si posa. |
STAGGER | script.js | 0.024 | Il ritardo fra una lettera del nome e la successiva, in secondi. |
EMPTY | script.js | Unassigned | La parola accanto al posto vuoto. |
Quando usarla
Dove si sceglie una persona per qualcosa: a chi tocca un compito in un’app di progetto, chi segue un cliente o un ordine, chi risponde a un messaggio in una casella condivisa, chi è di turno, chi rivede un documento. Funziona anche come scelta del responsabile in un modulo, con le persone a portata di clic invece di un menu a tendina.
Sul telefono
Il componente è largo 300 pixel e sta in uno schermo di 390 senza toccare i bordi; con più persone o volti più grandi la fila si stringe per starci. Al tocco su un volto il suo nome compare accanto al posto finché il dito è giù, come l’hover col puntatore; alzato il dito il volto vola nel posto con lo stesso movimento del computer. Si trascina anche col dito: lo schermo non scorre mentre lo si porta.
Con il movimento ridotto
Niente voli e niente molle: il volto scelto svanisce dalla fila e ricompare nel posto già pieno d’inchiostro, la fila si ricompone di colpo appena il volto è svanito, l’anello compare in dissolvenza invece di disegnarsi e le lettere del nome entrano e escono solo in dissolvenza, senza salire e senza cambiare larghezza. Il cerchio tratteggiato non si allarga quando un volto trascinato si avvicina: diventa solo nero.
Trappole
- Nello scambio i due volti si scontravano: il nuovo partiva proprio dal posto della fila dove tornava il vecchio. Ora il vecchio torna per primo, la fila gli apre il posto (il nuovo intanto aspetta nella fila) e il nuovo parte quando l’altro è in discesa.
- Il volo ad arco verso l’alto passava sopra il nome scritto accanto al posto, e quello diretto sopra i volti della fila. Ora il volto sale dritto e poi va di lato, e il nome si fa da parte durante il volo.
- L’inchiostro che cresceva con scale mentre le iniziali cambiavano colore lasciava a metà strada lettere nere su nero. Ora le iniziali sono scritte due volte, nere sotto e bianche dentro l’inchiostro, ritagliate dallo stesso clip-path.
- Aprendo un vuoto partivano prima i volti vicini, che finivano addosso a quelli più in là: ora aprendo partono prima i più lontani, chiudendo i più vicini. Anche col movimento ridotto la fila si ricomponeva sotto il volto che stava svanendo: ora aspetta che sia sparito.
- Dopo un clic il volto che scivolava sotto il puntatore fermo si prendeva l’hover e il suo nome chiaro copriva quello appena scelto: ora nessun nome si propone finché il puntatore non si muove.
- gsap.quickSetter con 'scale' dava l’errore «scaleX,scaleY is not a valid attribute name»: servono due setter, uno per scaleX e uno per scaleY.
- Col fuoco della tastiera sul volto nel posto si vedevano due anelli blu, quello del fuoco e quello del posto: ora l’anello del posto si fa più spesso.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 18 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.
