Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il menu a gocce
Un pulsante rotondo da cui sei azioni escono come gocce di un liquido: si allungano fuori dal pulsante, si staccano e si posano in cerchio con un rimbalzo, e richiamate ci rientrano fondendosi.
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 droplet menu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/manrope@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the menu: the actions come out of the round button like drops of a liquid and go back into it.
The drops are SVG circles under a goo filter (a blur, then a hard cut of the transparency); the icons are
buttons laid over them -->
<div class="radial" data-radial>
<svg class="radial__goo" viewBox="-200 -200 400 400" aria-hidden="true">
<defs>
<filter id="goo" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" data-blur/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -10"/>
</filter>
</defs>
<g class="radial__liquid" filter="url(#goo)">
<circle r="40" data-core/>
<circle r="28" data-drop/>
<circle r="28" data-drop/>
<circle r="28" data-drop/>
<circle r="28" data-drop/>
<circle r="28" data-drop/>
<circle r="28" data-drop/>
</g>
</svg>
<button class="radial__button" type="button" aria-expanded="false" aria-controls="actions" data-toggle data-autoclic>
<span class="sr" data-name>Open the actions</span>
<svg class="radial__plus" data-plus viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4.5v15M4.5 12h15"/></svg>
</button>
<ul class="radial__items" id="actions" data-items inert>
<li><button class="radial__item" type="button" aria-label="Share" data-item><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15V3M8 7l4-4 4 4M5 12v7h14v-7"/></svg></button></li>
<li><button class="radial__item" type="button" aria-label="Like" data-item><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button></li>
<li><button class="radial__item" type="button" aria-label="Save" data-item><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12v18l-6-4.5L6 21z"/></svg></button></li>
<li><button class="radial__item" type="button" aria-label="Edit" data-item><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.5 4.5l4 4L8 20H4v-4zM13 7l4 4"/></svg></button></li>
<li><button class="radial__item" type="button" aria-label="Download" data-item><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12M7 10l5 5 5-5M5 20h14"/></svg></button></li>
<li><button class="radial__item" type="button" aria-label="Delete" data-item><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6"/></svg></button></li>
</ul>
<span class="radial__label" data-label aria-hidden="true"></span>
</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.
11 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 menu a gocce» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante rotondo color lime con un più. Premendolo, sei azioni escono dal pulsante come gocce di un liquido: ogni goccia si allunga fuori dal pulsante, si stacca e si posa su un cerchio intorno a lui con un piccolo rimbalzo, una dopo l’altra, mentre il più gira in una X e il pulsante si stringe e torna. Le gocce portano le icone di Share, Like, Save, Edit, Download e Delete. Puntando un’azione la goccia cresce e il suo nome compare fuori dal cerchio, dalla sua parte; premendola pulsa e il menu si chiude. Premendo di nuovo il pulsante le gocce tornano indietro una alla volta e si fondono nel pulsante, che le inghiotte con un sussulto. Con il puntatore sul pulsante chiuso le gocce si affacciano ai suoi bordi.
Come funziona
Il liquido
Sette cerchi SVG, il pulsante e sei gocce, stanno in un gruppo con un filtro: feGaussianBlur li sfoca e feColorMatrix taglia netto la trasparenza (alfa per 24, meno 10), così due cerchi vicini diventano una forma sola. GOO è la sfocatura: più alta, più a lungo le gocce restano attaccate.
Le gocce e i pulsanti
Ogni goccia ha quattro numeri: la distanza dal centro, la grandezza, quanto si vede la sua icona e quanto è gonfia sotto il puntatore. A ogni fotogramma si scrivono il transform del cerchio, in unità del disegno (400 per lato), e quello del pulsante sopra di lui, in pixel, moltiplicati per il rapporto fra la larghezza vera e 400.
L’uscita
Ogni goccia va fino a RADIUS con elastic.out(SPRING), STAGGER secondi dopo la precedente; la sua icona compare poco dopo. Il pulsante si stringe all’88% e torna con un elastico, e il più ruota di 135 gradi.
Il ritorno
Le gocce rientrano con power3.in nell’ordine opposto e le icone spariscono subito; quando arriva l’ultima, il pulsante si gonfia al 110% e torna: è il sussulto. Sul pulsante chiuso le gocce vanno a PEEK unità dal centro, abbastanza per affacciarsi oltre il suo bordo.
Tastiera e dito
Il pulsante viene prima delle azioni nel codice, così il tasto Tab passa da lui alle azioni; le frecce girano fra le azioni, Esc chiude e ridà il focus al pulsante, e così un’azione scelta con la tastiera (con un dito no, o Safari su iPhone ci disegnerebbe il bordo del focus). Le azioni chiuse sono inert. Un tocco fuori chiude.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
RADIUS | script.js | 112 | Quanto lontano dal centro si posano le gocce, in unità del disegno. |
SPRING | script.js | [1, 0.5] | La molla di una goccia che si posa: la sua forza e quanto in fretta si ferma. |
STAGGER | script.js | 0.05 | I secondi fra una goccia e l’altra. |
GOO | script.js | 10 | La sfocatura del liquido: più alta, più a lungo le gocce restano attaccate. |
PEEK | script.js | 34 | Quanto si affacciano le gocce mentre il puntatore è sul pulsante chiuso. |
Quando usarla
Per un gruppo di azioni su un elemento (una foto, un messaggio, un file) o per il pulsante principale di un’app. Da quattro a otto azioni: con di più il cerchio si affolla.
Sul telefono
Il disegno si stringe alla larghezza dello schermo e i tocchi fanno come i clic. Senza puntatore le gocce non si affacciano e i nomi non compaiono, ma ogni azione ha il suo nome per gli screen reader.
Con il movimento ridotto
Le gocce non viaggiano: le azioni compaiono e scompaiono al loro posto in dissolvenza, il più diventa una X di colpo e il pulsante non si stringe né sussulta.
Trappole
- Le icone non stanno sotto il filtro: sfocate e tagliate dalla matrice di colore perderebbero i contorni. Per questo sono pulsanti HTML sopra il disegno, mossi con gli stessi numeri dei cerchi.
- La regione del filtro va allargata (x, y, width e height al 200%): con quella predefinita la sfocatura delle gocce lontane rischia di venire tagliata ai bordi.
- La matrice di colore decide quanto è appiccicoso il liquido: con alfa per 24 meno 10 il taglio è netto; un numero sottratto più piccolo fa gocce più gonfie e unite, uno più grande le stacca prima.
- Il pulsante va prima delle azioni nel codice: messo dopo, il tasto Tab dal pulsante uscirebbe dal menu invece di entrare nelle azioni.
Librerie
GSAP 3.15.0, Manrope (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,9 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 2 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.
