Il pulsante del razzo
Pulsanti, Fisica, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il banner dei cookie
Una scheda nell’angolo con un biscotto che entra rotolando: per ogni tipo di cookie rifiutato il biscotto prende un morso e perde qualche briciola, e riacceso il morso ricresce; fatta la scelta, la scheda si ripiega intorno al biscotto, che cade nell’angolo girando e rimbalzando e resta lì come pulsante per riaprirla.
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 cookie banner</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/gabarito@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the cookie banner: a card in the corner with a cookie that loses a bite for every kind of cookie refused. Once
chosen, the card folds around the cookie, which drops into the corner and stays there as the button that
opens the choices again -->
<div class="consent" data-consent>
<section class="card" role="region" aria-labelledby="consent-title" data-card data-autoclic>
<span class="card__surface" aria-hidden="true" data-surface></span>
<div class="card__head">
<span class="card__slot" data-slot></span>
<div class="card__words" data-fade>
<h2 class="card__title" id="consent-title">We use cookies</h2>
<p class="card__text">Some keep the site working, others help us see what you like. You decide which ones.</p>
</div>
</div>
<div class="card__more" id="consent-kinds" hidden data-more>
<ul class="kinds" data-kinds></ul>
</div>
<div class="card__actions" data-fade>
<button class="cbtn cbtn--main" type="button" data-all>Accept all</button>
<button class="cbtn" type="button" data-necessary>Only necessary</button>
<button class="cbtn cbtn--plain" type="button" aria-expanded="false" aria-controls="consent-kinds" data-choose>
<span class="cbtn__clip"><span class="cbtn__label" data-choose-label>Choose</span></span>
</button>
</div>
</section>
<button class="corner" type="button" aria-label="Cookie preferences" hidden data-corner></button>
</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.
22 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 banner dei cookie» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, in basso a sinistra, una scheda bianco caldo con un’ombra morbida: un biscotto disegnato (pasta dorata, pezzi di cioccolato, piccole crepe), We use cookies con una riga sotto e tre pulsanti, Accept all color cioccolato, Only necessary e Choose. All’apertura la scheda sale dal basso e il biscotto entra rotolando da sinistra fino al suo posto. Con Choose la scheda cresce verso l’alto e mostra quattro tipi di cookie (Necessary, sempre acceso, col lucchetto; Preferences, Statistics e Marketing) coi loro interruttori, la parola Choose scorre in Save choices e il biscotto prende un morso per ogni tipo spento, uno dopo l’altro, con un brivido e qualche briciola che cade. Accendendo un interruttore la levetta si allunga mentre scivola, il binario diventa color caramello e il morso ricresce; spegnendolo, un morso nuovo. Scegliendo, con Accept all gli interruttori si accendono uno dopo l’altro e il biscotto fa un saltello, con Only necessary si spengono e il biscotto viene morsicato; poi le parole della scheda sfumano e la carta si ripiega fino a un cerchio intorno al biscotto, che cade nell’angolo girando, si schiaccia toccando terra e rimbalza due volte; sotto il puntatore si scuote. Premendolo si accuccia, salta di nuovo al suo posto e la scheda si riapre da lui, coi tipi già aperti.
Come funziona
Il biscotto e i morsi
Il biscotto è un SVG disegnato due volte (nella scheda e nel pulsante tondo); i morsi sono tre cerchi neri in una maschera, sul bordo all’angolo di ciascun tipo (a 36,5 dal centro, a 15 gradi l’uno dall’altro): il loro raggio va da 0 a 12 e 9,5 per quanto il morso è dato, per BITE. Un morso si apre con back.out in 0,22 secondi, il biscotto ha un brivido (keyframes di rotation) e quattro briciole, piccoli poligoni, cadono e sfumano; un morso ricresce con back.in.
Gli interruttori
Gli interruttori sono caselle vere (role switch) sopra il binario: la levetta si sposta di 18 pixel con back.out allungandosi (scaleX 1,35, poi elastic.out fino a 1, dal lato da cui parte) e il binario prende il colore caramello. Necessary è acceso e disattivato, col lucchetto sulla levetta.
La scheda si ripiega
La carta della scheda è uno strato a sé, e l’ombra è un filter drop-shadow sulla scheda, così segue la forma: le parole sfumano, poi in FOLD secondi la carta si taglia con un clip-path inset fino al cerchio del posto del biscotto. I quattro lati e il raggio si animano come numeri e il clip-path si scrive a ogni fotogramma.
La caduta
In quel momento il pulsante tondo vero prende il posto del cerchio e cade nell’angolo: giù con power2.in, il biscotto che gira dentro, schiacciato (scaleY 0,8 dal basso) quando tocca terra e di nuovo tondo con elastic.out, poi due rimbalzi alti BOUNCE e BOUNCE² della caduta, in DROP secondi. Premuto, si accuccia, risale con back.out girando fino a un giro intero e la carta si riapre.
Tastiera e anteprima
La scheda è una regione col suo titolo, Choose ha aria-expanded, e la focalizzazione va al pulsante tondo quando la scheda si ripiega e torna su Choose quando si riapre. Un clic da script (l’anteprima della libreria) apre i tipi, salva, riapre, ne accende due, salva, riapre, accetta tutto, riapre, tiene solo i necessari e ricomincia ad accenderli.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
KINDS | script.js | [['Preferences', 'Remember your language and the choices you make.'], …] | I tipi di cookie che si possono spegnere: nome e una riga che lo descrive. |
BITE | script.js | 1 | Quanto è grande un morso (0: il biscotto resta intero). |
FOLD | script.js | 0.45 | I secondi in cui la scheda si ripiega intorno al biscotto, e si riapre. |
DROP | script.js | 0.9 | I secondi della caduta del biscotto nell’angolo. |
BOUNCE | script.js | 0.3 | Quanto rimbalza, come parte della caduta. |
Quando usarla
Per il consenso ai cookie di qualsiasi sito, ma anche per un avviso che si sceglie una volta e poi resta a portata di mano: le preferenze delle notifiche, la lingua, un giro di benvenuto.
Sul telefono
La scheda prende quasi tutta la larghezza in basso e i pulsanti vanno a capo se serve; il biscotto cade dritto nell’angolo, sotto il suo posto. Gli interruttori sono abbastanza grandi per il dito.
Con il movimento ridotto
La scheda c’è già senza salire e il biscotto senza rotolare; i morsi e gli interruttori cambiano subito, senza briciole né molle; fatta la scelta, la scheda sparisce e il pulsante tondo compare nell’angolo senza ripiegarsi né cadere, e allo stesso modo la scheda si riapre.
Trappole
- Un’ombra fatta con box-shadow sparirebbe sotto il clip-path che ripiega la scheda: qui l’ombra è un filter drop-shadow sulla scheda, che segue la forma della carta tagliata.
- Il clip-path come stringa non si anima: il browser scrive inset(0px round 22px) in breve e il tween non trova gli stessi numeri da una parte e dall’altra. I lati e il raggio si animano come numeri e si scrivono a ogni fotogramma.
- Ruotare il pulsante mentre lo si schiaccia dal basso lo sposterebbe (rotazione e schiacciamento vogliono centri diversi): gira il biscotto dentro il pulsante, e si schiaccia il pulsante.
- Una maschera SVG vuole un id unico: il biscotto disegnato due volte ha due maschere, coi loro nomi.
Librerie
GSAP 3.15.0, Gabarito (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,9 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.
