Il gruppo di avatar

Avatar, Fisica, HoverGSAPMediaPeso compresso: Demo 7,1 KBGSAP 28 KBGratisScarica lo zip

I volti di chi va a una cena, sovrapposti: vicino al puntatore si allargano su molle e quello sotto sale un poco col suo nome; il +4 si apre nei volti che nascondeva, che ne escono uno dopo l’altro, e Join fa cadere nel gruppo un volto nuovo con un rimbalzo.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The avatar group</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/kumbh-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the avatar group: the faces draw apart around the pointer on springs, the one under it rises with its name,
         the +4 opens into the faces it hid, and joining drops a new face into the group -->
    <section class="going" aria-labelledby="going-title" data-going data-autoclic>
      <h2 class="going__title" id="going-title">Friday dinner</h2>
      <p class="going__where">Trattoria del Ponte · 8 pm</p>
      <div class="going__stack" data-stack>
        <ul class="going__list" aria-label="Who is going" data-list></ul>
        <button class="going__more" type="button" aria-expanded="false" data-more>
          <span class="going__more-text" data-more-text></span>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 12h10"/></svg>
        </button>
      </div>
      <div class="going__foot">
        <p class="going__count"><span class="going__num" data-num></span> going</p>
        <button class="going__join" type="button" data-join><span data-join-text>Join</span></button>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </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.

35 valori da cambiare

Apri il Playground

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 gruppo di avatar» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una scheda scura con Friday dinner e Trattoria del Ponte · 8 pm; sotto, cinque tondi colorati con le iniziali, sovrapposti, e un tondo grigio +4; in fondo 9 going e un pulsante verde lime Join. All’apertura i volti si aprono a ventaglio da sotto il primo. Passando col puntatore, i volti vicini si allontanano su molle, di più quelli più vicini, e quello sotto il puntatore sale e si ingrandisce un poco mostrando sotto il suo nome. Il +4 si apre: i quattro volti nascosti ne escono uno dopo l’altro crescendo, mentre il tondo scivola in fondo alla fila e diventa un segno meno; premendolo di nuovo rientrano. Join fa cadere dall’alto, davanti a tutti, un volto lime con You, con un rimbalzo, mentre gli altri si spostano e il numero sale a 10 rotolando; il pulsante diventa Leave, che fa cadere via il volto e richiude la fila.

Come funziona

I posti

Ogni volto ha il suo posto nella fila: un passo di 46 − OVERLAP pixel dal precedente, o meno se la fila non ci starebbe (con tutti i volti, al telefono, si stringono). La loro x, la loro altezza e la loro scala vanno ai posti su molle (SPRING), calcolate sul ticker di GSAP a passi di 4 millisecondi; il primo volto sta sopra gli altri.

Il puntatore che allarga

Ogni spazio fra due volti cresce di SPREAD × e^(−(d ÷ REACH)²), dove d è la distanza fra il puntatore e il centro dello spazio: i volti vicini al puntatore si allontanano di più. Il volto più vicino, misurato sui posti fermi (così non scappa via), sale di 6 pixel e si ingrandisce a 1,12, e il suo nome compare sotto. Sopra il +4 la fila non si allarga, così il +4 resta fermo sotto il puntatore.

Il +N che si apre

I volti oltre i primi SHOWN aspettano dentro il tondo +N, piccoli e trasparenti. Aprendolo, escono uno ogni 0,07 secondi, crescendo da 0,4 a 1 sulle loro molle, mentre il tondo segue la fila fino in fondo e il numero lascia il posto a un segno meno; chiudendolo, tornano dentro il tondo e svaniscono.

Join e Leave

Il volto nuovo parte 70 pixel più in alto, inclinato, e scende al primo posto su una molla più morbida che rimbalza; gli altri si spostano di un passo. Il numero rotola: il vecchio esce dalla parte del cambiamento e il nuovo entra dall’altra (con immediateRender false, perché il vecchio esca davvero). Leave fa cadere il volto di 36 pixel, girando e svanendo.

Tasti e anteprima

I volti sono un elenco con un solo arresto per il Tab: le frecce (e Inizio e Fine) passano da un volto all’altro, e quello con la focalizzazione allarga gli altri e mostra il nome come farebbe il puntatore; il +N è un pulsante con aria-expanded, e una regione aria-live dice chi va e quando l’elenco si apre. Al telefono un tocco su un volto lo solleva col suo nome. Un clic da script (l’anteprima della libreria) è un puntatore finto che passa lungo i volti, apre il +N, ci ripassa, entra nel gruppo, richiude e se ne va.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`OVERLAP`	script.js	`14`	Di quanti pixel ogni volto finisce sotto il successivo.
`SPREAD`	script.js	`22`	Di quanti pixel si allontanano i volti vicini al puntatore.
`REACH`	script.js	`64`	Fin dove arriva, in pixel, l’attrazione del puntatore.
`SPRING`	script.js	`[360, 0.68]`	La molla dei volti: quanto è rigida e quanto è frenata.
`SHOWN`	script.js	`5`	Quanti volti si vedono prima del +N.
`PEOPLE`	script.js	`[['Ana Ruiz', '#f4a67c'], …]`	Chi va, ognuno col colore del suo volto.

Provali nel Playground

Quando usarla

Per chi partecipa a un evento, i membri di un progetto o di un gruppo, chi sta guardando un documento, gli ospiti di una prenotazione, i clienti che hanno lasciato una recensione.

Sul telefono

La fila si stringe per stare nella larghezza dello schermo, anche con tutti i volti aperti; un tocco su un volto lo solleva e ne mostra il nome finché il dito non si alza.

Con il movimento ridotto

I volti vanno subito ai loro posti, senza molle: si allargano, si aprono e si richiudono di colpo, il volto nuovo compare al suo posto senza cadere, il numero cambia senza rotolare e il nome compare senza dissolvenza.

Trappole

Il volto da sollevare va scelto sui posti fermi, non su quelli allargati: altrimenti, allargandosi, il volto scappa via dal puntatore e la scelta salta da un volto all’altro.
Un elemento che si sposta quando il puntatore si avvicina è difficile da premere: sopra il +N la fila smette di allargarsi, così resta fermo.
Gli z-index dei volti valgono anche contro il +N, perché l’elenco non ha un suo contesto di sovrapposizione: il +N ha uno z-index più alto, così i volti ne escono da sotto.
Per i tasti, un solo arresto del Tab sull’elenco (un tabindex che si sposta) e le frecce dentro: nove arresti uno dopo l’altro sarebbero troppi.

Librerie

GSAP 3.15.0, Kumbh Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 7,1 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.