Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
Il consenso in una riga
Il banner dei cookie scritto come una frase sola, nello stile minimal: We use cookies for essentials, analytics and marketing. Le categorie sono parole della frase e interruttori veri: toccata, una parola viene barrata da una linea vermiglia sottile, perde peso e larghezza e salta sopra le altre fino in fondo alla frase, che si ricompone con FLIP («essentials only, not analytics or marketing»). Scelto, la frase si chiude in una riga e resta un piccolo link che dice cosa si è scelto.
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, viewport-fit=cover">
<title>Consent in one line</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the cookie banner written as one sentence, near the middle of the page (at the bottom on a real site). The kinds of cookies are words of the
sentence and real switches: struck with a thin line they move to the end («not analytics»), and the sentence
finds its new order. Once chosen, the sentence closes into a line, and a small link is left to open it again.
The words are made by script.js, from the values at its top -->
<div class="consent" data-consent>
<section class="banner" role="region" aria-label="Cookie consent" data-banner data-autoclic>
<span class="banner__frame" aria-hidden="true" data-frame></span>
<p class="sentence" data-sentence></p>
<div class="actions" data-actions>
<button class="pill pill--main" type="button" data-accept>
<span class="pill__bg" aria-hidden="true"></span>
<span class="pill__label" data-text="Accept all">Accept all</span>
</button>
<button class="pill" type="button" data-save>
<span class="pill__bg" aria-hidden="true"></span>
<span class="pill__label" data-text="Save choices">Save choices</span>
</button>
</div>
</section>
<button class="reopen" type="button" hidden data-reopen>
<span class="reopen__mask"><span class="reopen__text" data-reopen-text>Cookie settings <span class="reopen__state">· <span data-summary>all on</span></span></span></span>
<span class="reopen__line" aria-hidden="true" data-reopen-line></span>
</button>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" data-live></p>
</div>
<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
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 consenso in una riga» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, al centro (su un sito vero sta in basso, basta abbassare --gap), una capsula bianca con un filo sottile e un’ombra appena accennata. Dentro, una frase in Archivo leggero: We use cookies for essentials, analytics and marketing., con le tre categorie più pesanti; analytics e marketing hanno sotto un filo grigio fermo, che dice che si possono toccare. Accanto due pillole, Accept all nera e Save choices col bordo sottile. All’apertura un punto al centro tira una riga d’inchiostro, la riga si apre nella capsula superando di un pixel la sua altezza, e le parole salgono dalla riga una dopo l’altra, larghe come devono essere. Col mouse sopra una categoria la parola prende peso e la linea vermiglia la tocca appena (su una parola barrata, la linea si stacca un poco). Toccandola, la linea la barra da sinistra, la parola diventa grigia, più leggera e più stretta, poi salta sopra le altre fino in fondo, dove la frase la nomina fra quelle rifiutate: We use cookies for essentials and analytics, not marketing. Le altre parole scivolano al loro posto nuovo, le virgole e le parole di collegamento (and, only, not, or) sfumano dove erano e salgono dove servono, e la capsula si allunga o si accorcia con la frase. Spente tutte e due: We use cookies for essentials only, not analytics or marketing. Toccata di nuovo, la linea si stacca verso destra e la parola torna con un salto al suo posto. Essentials non si può barrare: la linea parte e torna indietro con una molla, e la parola trema di un pixel. Con Save choices o Accept all (che prima riporta indietro le parole barrate) le parole si piegano piatte sulla loro riga una dopo l’altra, la capsula si chiude in un filo, il filo diventa d’inchiostro e scende fino alla misura di un piccolo link, da cui sale la scritta Cookie settings · essentials, analytics (o all on, o essentials only). Il link riapre la frase com’era.
Come funziona
La frase dai suoi interruttori
La frase si scrive da START, ALWAYS e KINDS a ogni cambio: le categorie accese con le virgole e and (con only se resta solo essentials), poi, se ce ne sono di spente, una virgola, not e le spente con or. Ogni pezzo è un elemento con una chiave: una categoria è sempre lo stesso pulsante (role switch, aria-checked), e passa da una parte all’altra della frase; una virgola o una parola di collegamento prende il nome della parola che viene dopo, così quando l’ordine cambia la vecchia sfuma e una nuova sale dove serve, e nessuna parola ne attraversa un’altra. Virgole e punto stanno dentro la parola che li precede: non si separano mai a fine riga.
FLIP con il carattere che cambia
Prima del cambio si misura ogni pezzo (getBoundingClientRect, transform compresi, così un cambio a metà riparte da dove le parole si trovano). Poi si rimette l’ordine nuovo, si dà a ogni parola il peso e la larghezza finali (wght 610 o 300, wdth 100 o 84) e si misura di nuovo. Ogni pezzo parte spostato della differenza e torna a zero con power3.inOut in RECOMPOSE secondi. Mentre viaggiano, ogni parola tiene la larghezza che avrà alla fine e il banner la sua nuova misura: la parola barrata dimagrisce per strada, e senza questo avrebbe trascinato le altre (sul telefono avrebbe anche spostato gli a capo).
La linea, il salto, la piega
La linea è uno span di 1,5 pixel dentro il testo della parola, sempre lungo quanto le lettere, all’altezza della metà delle minuscole, misurata con measureText: si disegna con scaleX da sinistra in STRIKE secondi e si stacca verso destra. La parola resta ferma mentre la linea corre, poi parte: sulla prima riga salta sopra le altre (HOP em in su con sine, e uno schiacciamento di 0,94 con elastic.out quando atterra); se cambia riga, o salterebbe nella riga di sopra, si piega piatta dove era e si riapre dove va con back.out, così non copre mai le altre parole.
La capsula che diventa un link
La capsula è uno strato a sé, con left, top, width e height animati in pixel: segue la frase quando cambia lunghezza e, alla scelta, si chiude in un filo alto un pixel (bordo e ombra spariscono con una variabile CSS, --sh), diventa d’inchiostro e scende alla misura del link, mentre le parole si piegano con scaleY e l’asse wdth a 62. Il link sale dal filo dentro una maschera e il filo si consuma da tutte e due le parti. Riaprendo si fa lo stesso al contrario, e la capsula si apre con back.out, un pixel oltre e indietro.
Tastiera, lettori di schermo e anteprima
Con Tab si va da essentials ad analytics e marketing (nell’ordine in cui la frase li dice in quel momento) e alle pillole; Spazio o Invio barrano e riaccendono, e la focalizzazione resta sulla parola anche dopo che si è spostata. Ogni cambio si annuncia in una regione aria-live con la frase nuova; chiudendo la focalizzazione passa al link, riaprendo alla prima categoria. Il clic dell’anteprima (detail 0) fa un giro in una timeline GSAP: barra marketing, poi analytics, riaccende analytics, salva, riapre, accetta tutto e riapre come all’inizio. Un tocco vero ferma il giro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
START | script.js | 'We use cookies for' | Le parole prima delle categorie. |
ALWAYS | script.js | 'essentials' | La categoria sempre accesa, che non si può barrare. |
KINDS | script.js | ['analytics', 'marketing'] | Le categorie che si possono barrare, nell’ordine in cui la frase le dice. |
STRIKE | script.js | 0.34 | I secondi in cui la linea barra una parola, o se ne stacca. |
RECOMPOSE | script.js | 0.72 | I secondi in cui la frase trova il suo ordine nuovo. |
HOP | script.js | 0.85 | Quanto salta in alto la parola che passa sopra le altre, in em. |
CLOSE | script.js | 1 | Quanto lentamente il banner si chiude in una riga e si riapre (1 è la misura base). |
WEIGHTS | script.js | [330, 610, 300] | Il peso della frase, di una categoria accesa e di una barrata (da 100 a 900). |
STRUCK_WIDTH | script.js | 84 | La larghezza (asse wdth) di una parola barrata, da 62 a 125. |
Quando usarla
Per il consenso ai cookie di un sito che vuole dirlo in poche parole, ma anche per ogni scelta che si legge come una frase: le notifiche che si ricevono (we’ll email you about orders and news), i dati che un’app condivide, gli ingredienti da togliere da un piatto.
Sul telefono
La capsula prende tutta la larghezza meno dodici pixel per parte, la frase va a capo su due righe e le pillole stanno sotto, una accanto all’altra, metà per una. Le parole che cambiano riga si piegano e si riaprono invece di attraversare le altre; le stesse animazioni, solo misurate per il dito.
Con il movimento ridotto
Niente salti, niente pieghe, niente fili che corrono: la linea compare già intera, la frase nuova appare con una dissolvenza al suo posto, il banner sfuma e al suo posto sfuma dentro il link, e lo stesso riaprendo.
Trappole
- Con le parole che cambiano peso e larghezza, la misura finale e quella del momento non coincidono: il banner centrato si stringeva mentre la parola barrata dimagriva, e tutta la frase scivolava di lato già prima di partire. Durante il viaggio ogni parola tiene la larghezza finale e il banner la sua misura nuova.
- Una virgola in un pezzo suo, con un margine negativo per stare attaccata alla parola, poteva andare a capo da sola e restare appesa fuori dal bordo: virgole e punto stanno dentro la parola che li precede.
- La stessa parola and riusata in un altro punto della frase attraversava la categoria che si spostava dall’altra parte (si leggeva analyticsand): le parole di collegamento prendono il nome della parola dopo, e una vecchia sfuma mentre una nuova sale.
- Sul telefono il salto sopra le altre finiva sulla riga di sopra e copriva We use cookies: fuori dalla prima riga, e quando cambia riga, la parola si piega e si riapre al suo posto nuovo.
- Animare il bordo e l’ombra della capsula come stringhe di box-shadow non funziona (il browser scrive il colore davanti e il tween mescola i numeri): bordo e ombra dipendono da una variabile CSS, --sh, che va da 1 a 0.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 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.
