Il campo delle etichette

Etichette, Testo, TransizioniGSAPMediaPeso compresso: Demo 6,7 KBGSAP 28 KBGratisScarica lo zip

Un campo dove le parole diventano etichette colorate: scritta e confermata, o scelta fra i suggerimenti, la parola vola dal punto in cui era al suo posto e il colore le cresce intorno con un piccolo slancio, mentre le altre si spostano per farle spazio; tolta, si rimpicciolisce e le altre chiudono il vuoto.

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 tag field</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rethink-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tag field: words typed or chosen turn into coloured tags that grow around them, the others slide to make
         room, a tag taken away shrinks and the rest close the gap -->
    <div class="tags" data-tags data-autoclic>
      <label class="tags__label" id="tags-label" for="tags-input">What are you into?</label>
      <div class="tags__box">
        <div class="tags__field" data-field>
          <ul class="tags__list" aria-labelledby="tags-label" data-list></ul>
          <input class="tags__input" id="tags-input" type="text" role="combobox" aria-expanded="false" aria-controls="tags-options" aria-autocomplete="list" aria-describedby="tags-hint" autocomplete="off" autocapitalize="words" autocorrect="off" spellcheck="false" enterkeyhint="done" placeholder="Add an interest" data-input>
        </div>
        <ul class="tags__options" id="tags-options" role="listbox" aria-label="Suggestions" hidden data-options></ul>
      </div>
      <p class="tags__hint" id="tags-hint" data-hint></p>
      <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.

23 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 campo delle etichette» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la scritta What are you into?, un campo bianco con dentro le etichette Hiking, Wine tasting e Old towns, ognuna nel suo colore tenue con una crocetta, e la casella Add an interest; sotto, Press Enter to add, up to 8. Scrivendo, sotto il campo si apre un elenco di suggerimenti con la parte scritta in grassetto; con le frecce o col puntatore se ne accende uno. Invio, una virgola o un clic ne fanno un’etichetta: le parole volano dal campo o dall’elenco al loro posto, il colore cresce loro intorno con un leggero slancio e la crocetta entra girando, mentre la casella si sposta più in là. Una parola che c’è già fa tremare e lampeggiare la sua etichetta e la riga sotto lo dice in rosso; con otto etichette trema tutto il campo. La crocetta toglie un’etichetta: si rimpicciolisce e sparisce, le altre scivolano a chiudere il vuoto. Nel campo vuoto il primo tasto indietro contorna l’ultima etichetta del suo colore, il secondo la toglie.

Come funziona

Una casella vera

Il campo è un input vero con role combobox, i suggerimenti una listbox (aria-activedescendant su quello acceso), le etichette un elenco, ognuna con un pulsante Remove, e una regione aria-live dice che cosa si è aggiunto o tolto.

Le parole che volano

Un’etichetta nuova va in fondo all’elenco; le sue parole partono da dove erano (l’inizio della casella, o il testo del suggerimento scelto, misurato con un Range) e volano al loro posto in SLIDE + 0,1 secondi. Il colore è uno strato a sé che cresce dalla larghezza delle parole con back.out(POP), e la crocetta entra girando.

Gli altri fanno posto

Prima di ogni cambio si misurano tutte le etichette e la casella; dopo, ognuna scivola dal vecchio posto al nuovo (power3.out, SLIDE secondi). Un’etichetta tolta esce dal flusso (position absolute, dov’era) e si rimpicciolisce mentre le altre chiudono il vuoto.

No, grazie

Una parola che c’è già fa tremare la sua etichetta (keyframes su x) e ne gonfia il colore, che torna con elastic.out; con MAX etichette trema tutto il campo; la riga sotto il campo dice il perché in rosso e dopo un attimo torna com’era.

Tastiera e anteprima

Invio o una virgola confermano, le frecce scorrono i suggerimenti, Esc li chiude, il tasto indietro nel campo vuoto segna l’ultima etichetta (il contorno nel suo inchiostro) e un secondo tasto indietro la toglie. Un clic da script (l’anteprima della libreria) sceglie un suggerimento, scrive un’etichetta, ne scrive una che c’è già, ne toglie una con la crocetta e una col tasto indietro, senza prendere la focalizzazione.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MAX`	script.js	`8`	Quante etichette ci possono essere.
`POP`	script.js	`1.6`	Quanto va oltre il colore di un’etichetta nuova mentre cresce.
`SLIDE`	script.js	`0.45`	I secondi in cui le etichette scivolano al loro posto nuovo.
`SUGGESTIONS`	script.js	`['Hiking', 'Cycling', 'Wine tasting', …]`	Le parole suggerite mentre si scrive.
`START`	script.js	`['Hiking', 'Wine tasting', 'Old towns']`	Le etichette all’apertura della pagina.

Provali nel Playground

Quando usarla

Per gli interessi di un profilo, le parole chiave di un articolo, gli ingredienti di una ricetta, i destinatari di un messaggio, i filtri di una ricerca.

Sul telefono

Il campo prende la larghezza dello schermo e le etichette vanno a capo; la casella è a 16 pixel, così Safari su iPhone non ingrandisce la pagina quando la si tocca, la correzione automatica è spenta, così non cambia le parole, e la tastiera mostra il tasto per finire.

Con il movimento ridotto

Le etichette compaiono e spariscono al loro posto, senza volo né slancio, le altre si spostano senza scivolare, i suggerimenti si aprono senza animazione e niente trema: la riga sotto il campo dice comunque che cosa non va.

Trappole

Un elemento che cambia posto nel flusso salta: per farlo scivolare si misura prima e dopo il cambio e lo si porta dal vecchio posto al nuovo con una trasformazione (la tecnica FLIP).
Il testo di un suggerimento si misura con un Range (selectNodeContents), non con la riga intera: così le parole partono proprio da dove si leggono.
Scegliere un suggerimento col puntatore toglierebbe il fuoco alla casella prima del clic: il pointerdown sull’elenco si ferma (preventDefault).
Una casella sotto i 16 pixel fa ingrandire la pagina in Safari su iPhone quando la si tocca.

Librerie

GSAP 3.15.0, Rethink Sans (font variabile) 5.3.0.

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