Il menu a mazzetta di colori
Menu, Fisica, Transizioni, Hover
NuovaGratis
Tutti i componenti
I filtri che si fondono
Le etichette di filtro dei sentieri di un parco, riempite da un liquido verde: accesa da sola, una goccia cade in mezzo e si allarga fino ai bordi; accanto a un’etichetta accesa il liquido arriva dalla vicina, e fra due accese entra dai due lati e i due fronti si allungano uno verso l’altro fino a unirsi. Le etichette accese vicine sono una pozza sola; spenta una, la pozza si divide con un collo che si assottiglia e si spezza, e il conteggio dei sentieri rotola al numero nuovo.
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 merging filters</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/parkinsans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the filters of a park's trails: a lit filter is filled with a liquid, and the liquid of two lit filters side by
side runs together into one pool; switched off, the pool splits with a neck that stretches and breaks. The
chips are made by the script from its list -->
<div class="trails" data-trails data-autoclic>
<div class="chips" role="group" aria-label="Filter the trails" data-chips>
<div class="flow" aria-hidden="true" data-flow></div>
<span class="ring" aria-hidden="true" data-ring></span>
</div>
<div class="result">
<p class="result__count" aria-hidden="true"><span class="odo" data-odo></span> <span data-noun>trails</span></p>
<button class="clear" type="button" aria-disabled="true" data-clear>Clear</button>
<p class="result__names" data-names></p>
<p class="sr" aria-live="polite" data-live></p>
</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.
26 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 «I filtri che si fondono» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco sette etichette a pillola su due righe, contornate di un grigio chiaro: Easy, Loop, Dogs welcome, Waterfall, Shady, Lake view e Under 2 hours. Sotto, a sinistra, il numero dei sentieri che restano, 12 trails, coi nomi dei primi due e quanti altri ce ne sono; a destra Clear. All’apertura le etichette salgono una dopo l’altra e in Easy e in Dogs welcome cade una goccia di liquido verde scuro, con una luce più chiara lungo il bordo in alto. Accendendo un’etichetta che non ha vicine accese, una goccia schiacciata cade in mezzo e si allarga fino ai due capi, gonfiandosi un poco oltre il contorno prima di fermarsi. Accendendone una accanto a un’accesa, il liquido arriva dalla vicina e la riempie da quella parte; fra due accese entra dai due lati: le due punte, allungate dalla corsa, si cercano, si toccano con un collo stretto che si allarga subito, e le tre etichette diventano una pillola sola. Dove il liquido passa le parole diventano bianche e più piene, lettera per lettera. Spegnendo un’etichetta in mezzo a due accese, il suo liquido si divide a metà e torna nelle vicine: in mezzo resta un collo che si allunga, si assottiglia e si spezza. Spegnendone una accanto a un’accesa, il liquido torna nella vicina; da sola, il liquido esce dal capo dalla parte del dito e la parola torna scura. Col puntatore sopra un’etichetta spenta, il liquido delle vicine accese si sporge verso di lei; sopra un’accesa, o sopra Clear, i punti in cui si uniscono le etichette si stringono un poco, come per staccarsi; tenendo premuta un’accesa il liquido si stringe. Il numero rotola alla cifra nuova, i nomi cambiano con una dissolvenza; se nessun sentiero ha tutti i filtri, la riga lo dice e dice quale filtro togliere per averne di più. Clear svuota tutto: ogni pozza si divide e il liquido esce verso Clear.
Come funziona
Pulsanti veri, liquido disegnato
Le etichette sono pulsanti veri con aria-pressed, in un role="group" col suo nome; Tab, Invio e Spazio funzionano come sempre. Sopra c’è un solo strato del colore del liquido, tagliato a ogni fotogramma con clip-path: path() alla forma del liquido; dentro lo stesso strato ci sono le parole in bianco, ognuna al posto della sua etichetta, così una parola diventa bianca esattamente fin dove è arrivato il liquido.
Due tratti su molle per etichetta
Il liquido di un’etichetta sono due tratti, ognuno con i due capi su molle (FLOW), calcolate sul ticker di GSAP a passi di 1/240 di secondo. Accesa, i tratti coprono l’etichetta e, se la vicina sulla stessa riga è accesa, entrano nello spazio fra le due di mezzo spazio più un capo: i capi delle vicine si sovrappongono e insieme fanno una pillola liscia. Partono dal centro come una goccia schiacciata (l’altezza su una molla più morbida, SPLASH), dal capo della vicina, o uno da ogni lato.
Pezzi e colli
Per ogni riga i tratti si mettono in fila: quelli che si sovrappongono abbastanza diventano un pezzo solo, e fra due pezzi vicini si disegna un collo, due curve di Bézier per lato che escono da ogni capo lungo la sua curva e scendono nel mezzo a un’altezza h·(1 − t²)^1,15, con t la distanza fra i centri dei capi divisa per i due capi più STRETCH. Appena i capi si toccano il collo è già spesso, come il ponte fra due gocce; più si allontanano più è sottile, e oltre STRETCH si spezza. Un capo che corre si allunga in una punta con la sua velocità, uno che si ritira si fa tozzo.
Dove va il liquido spento
Con le vicine accese i tratti tornano dentro di loro, metà per parte se sono accese tutte e due, e in mezzo resta il collo che si spezza. Da solo il liquido esce dal capo dalla parte del dito (verso Clear con Clear, a sinistra dalla tastiera): il capo lontano punta oltre quello vicino, così l’ultimo pezzo se ne va di corsa invece di restare lì come una virgola.
Il resto risponde
Col puntatore su un’etichetta spenta le vicine accese si sporgono verso di lei di REACH pixel; su un’accesa, o su Clear, le giunture si allentano di 9 pixel e compaiono i colli; tenuta premuta, un’accesa si stringe. Il numero sta su rulli di cifre che girano con back.out, ogni finestrella larga quanto la sua cifra e sfumata in alto e in basso; i nomi cambiano con una dissolvenza e un filo di sfocatura, e una regione aria-live dice il conteggio.
Tastiera e anteprima
Un solo anello per la tastiera, sopra il liquido, scivola da un’etichetta all’altra. Un clic da script (detail 0, l’anteprima della libreria) fa da mano finta: accende Loop fra le due accese, poi Shady e Lake view sulla riga sotto, spegne Loop, passa su Clear e svuota tutto, poi riaccende Easy e Dogs welcome.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FILTERS | script.js | ['Easy', 'Loop', 'Dogs welcome', …] | I filtri, in ordine (i sentieri dell’esempio conoscono i primi sette). |
START | script.js | ['Easy', 'Dogs welcome'] | I filtri accesi all’apertura della pagina. |
FLOW | script.js | [90, 0.78] | La molla su cui corre il liquido: quanto è rigida e quanto è frenata. |
SPLASH | script.js | 0.38 | Quanto è frenata l’altezza di una goccia che cade (meno, e trema di più). |
STRETCH | script.js | 26 | Quanti pixel si allunga un collo di liquido prima di spezzarsi. |
REACH | script.js | 7 | Quanto si sporge il liquido verso un’etichetta spenta sotto il puntatore. |
NOUN | script.js | ['trail', 'trails'] | Che cosa si conta, al singolare e al plurale. |
Quando usarla
Per i filtri di un elenco che si combinano: i sentieri di un parco, le case di un sito di affitti, i corsi di una scuola, le ricette, i film di un catalogo. Ovunque chi sceglie deve vedere subito quanti risultati restano.
Sul telefono
A 390 pixel le etichette vanno su tre righe e il liquido si unisce solo fra vicine della stessa riga. Un tocco accende e spegne, tenendo premuta un’accesa il liquido si stringe, e il liquido di un’etichetta spenta da sola esce dalla parte del dito. Gli accenni dell’hover lì non ci sono: si vede tutto al tocco.
Con il movimento ridotto
Il liquido è subito al suo posto: le etichette accese sono già piene e le vicine già unite, senza gocce, travasi né colli, e il puntatore non sposta niente. Il numero cambia con una dissolvenza senza rotolare, i nomi in dissolvenza, e l’anello della tastiera passa da un’etichetta all’altra senza scivolare.
Trappole
- Due pillole che si sovrappongono poco fanno una tacca dove si incrociano i cerchi dei capi; il collo, calcolato sottile fin dal primo contatto, restava nascosto dentro i cerchi e la tacca si vedeva. Ora appena i capi si toccano il collo è spesso quasi quanto il liquido (1 − t²) e si assottiglia solo quando si allontanano.
- Spegnere un’etichetta facendo restringere il liquido verso il centro tagliava le parole in alto, in basso e ai lati, e finiva in un puntino scuro: ora il liquido esce da un capo a tutta altezza, come entra, e il capo lontano punta oltre quello vicino così l’ultimo pezzo sparisce di corsa.
- Con le cifre tabellari di Parkinsans l’1 restava in mezzo a uno spazio largo e 12 si leggeva «1 2»: ogni finestrella del contatore prende la larghezza della cifra che mostra, misurata quando il carattere è caricato.
- Durante la corsa dei rulli si vedevano pezzi delle cifre vicine sopra e sotto il numero: la finestrella ha una maschera sfumata in alto e in basso.
- Col movimento ridotto non gira il ciclo che ridisegna il liquido, e gli accenni dell’hover lasciavano la forma allentata anche dopo che il puntatore era uscito: col movimento ridotto gli accenni sono spenti e ogni cambio ridisegna subito.
Librerie
GSAP 3.15.0, Parkinsans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 6 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.
