Il pulsante da far scorrere
Pulsanti, Fisica, Transizioni
NuovaGratis
Tutti i componenti
La notifica col drone
Le notifiche degli ordini di un negozio di casa le porta un piccolo drone: arriva di lato con la notifica appesa a due cavi, frena e la notifica dondola, la cala al suo posto, i cavi si allentano, i ganci la lasciano e il drone se ne va riavvolgendoli. Chiusa, un altro drone torna a prenderla, aggancia il bordo, prende il peso con un piccolo affondo e la porta via, mentre arriva la notifica dopo.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nella scheda React 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>The drone-drop toast</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the order notifications of a home goods shop, brought by a small delivery drone. The drone flies in with the
notification hanging from two cables, lowers it into its place, lets go and flies off reeling the cables in.
Dismissed (the cross, Track, Esc), a drone comes back, hooks it and lifts it away, while the next one arrives;
swiped sideways, it is thrown off. The notifications and the drones are made by script.js, from MESSAGES;
the cables are chains of points worked out every frame, the notification is a rigid body hanging from them -->
<div class="dock" data-dock>
<section class="shelf" aria-label="Notifications" data-shelf></section>
<svg class="sky" aria-hidden="true" data-sky>
<defs>
<linearGradient id="drone-shell" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" style="stop-color: var(--drone-light)"/>
<stop offset="0.55" style="stop-color: var(--drone)"/>
<stop offset="1" style="stop-color: var(--drone-dark)"/>
</linearGradient>
<linearGradient id="drone-disc" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" style="stop-color: var(--rotor); stop-opacity: 0"/>
<stop offset="0.5" style="stop-color: var(--rotor); stop-opacity: 0.32"/>
<stop offset="1" style="stop-color: var(--rotor); stop-opacity: 0"/>
</linearGradient>
<clipPath id="drone-body-clip">
<rect x="-29" y="-13" width="58" height="23" rx="11.5"/>
</clipPath>
</defs>
<g data-cables></g>
<g data-drones></g>
</svg>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" data-live></p>
</div>
</main>
<template data-template>
<article class="toast" inert>
<svg class="toast__icon" viewBox="0 0 36 36" aria-hidden="true" data-icon></svg>
<div class="toast__text">
<p class="toast__title" data-title></p>
<p class="toast__body" data-body></p>
</div>
<button class="toast__action" type="button" data-action></button>
<button class="toast__close" type="button" aria-label="Dismiss notification" data-close data-autoclic>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg>
</button>
</article>
</template>
<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.
43 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 «La notifica col drone» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, da sola al centro, una notifica bianca alta 70 pixel con un bordo sottilissimo e un’ombra morbida: un pacco di cartone col nastro arancione, Your order has shipped, Arrives Thursday, Oct 16, il pulsante scuro Track e la croce. Non compare: la porta un drone color grafite con una fascia arancione, visto di fronte, con le eliche che girano sfocate. Il drone entra di lato già in volo, con la notifica appesa sotto a due cavi sottili che finiscono in due ganci d’acciaio sul bordo di sopra; frenando si inclina all’indietro e la notifica dondola in avanti, inclinata, poi oscilla sempre meno. Sopra il suo posto il drone si ferma e cala i cavi: la notifica scende, tocca il fondo (con un angolo prima, se dondola ancora), i cavi si allentano e si appoggiano sul bordo, i ganci la lasciano e la notifica scivola dell’ultimo pixel al suo posto mentre l’ombra si stringe. Il drone riavvolge i cavi, che ondeggiano coi ganci, sale e se ne va dall’altra parte, inclinandosi nell’accelerazione. La croce, Track o Esc chiamano un drone: arriva dall’altra parte coi ganci che penzolano, li cala sul bordo, li aggancia, tira i cavi finché prendono il peso (e lui fa un piccolo affondo), solleva la notifica e la porta via dondolando; intanto entra la notifica dopo: Out for delivery, Delivered to your door, Return picked up, a turno. Trascinata di lato con un dito o col mouse, la notifica si sposta e si inclina appena; oltre un terzo della larghezza, o con uno scatto, vola via girando e cade fuori dalla pagina. All’apertura della pagina arriva una prima notifica da sola.
Come funziona
Una notifica rigida fatta di quattro punti
La notifica è un corpo rigido alla Verlet: i suoi quattro angoli sono punti con la posizione di adesso e quella di prima, tenuti insieme da sei bastoncini (i quattro lati e le due diagonali). A ogni passo la gravità li tira giù e i vincoli li rimettono a posto, otto volte; dai punti si ricavano il centro e l’angolo, e la notifica vera (un elemento HTML con i suoi pulsanti) si muove con un solo transform. Il passo della fisica non supera 1/240 di secondo, e un fotogramma lento ne fa di più.
Due cavi che tirano un punto sul bordo
Ogni cavo è un vincolo a una via: se il gancio è più lontano dall’argano della lunghezza del cavo, lo si riporta indietro, altrimenti il cavo è lento e non fa niente. Il gancio sta su un punto del bordo di sopra, fra i due angoli, quindi la correzione si divide fra i due angoli secondo quanto il punto è vicino a ognuno (i pesi (1 − a) e a, normalizzati). Con gli argani più stretti dei ganci i cavi si aprono a trapezio: la notifica pende dritta, ma una frenata la fa dondolare anche girando. Il fondo del suo posto ferma gli angoli con l’attrito, così atterra con un angolo prima.
Un drone che insegue il suo bersaglio
GSAP non muove il drone: muove il suo bersaglio (crociera, poi frenata, poi la salita e l’uscita) e la lunghezza dei cavi, con dei richiami per agganciare e lasciare. Il drone lo segue con una molla poco smorzata, quindi resta indietro, arriva un poco oltre e torna; si inclina quanto accelera, filtrato, come un quadricottero vero. La trazione dei cavi lo tira giù, e quando prende il peso fa un piccolo affondo. Il dondolio si smorza rispetto al drone e non rispetto all’aria, altrimenti in volo la notifica resterebbe sempre indietro, storta.
I cavi disegnati sono catene
Quello che si vede di un cavo è una catena di quattordici punti, appesa all’argano e al gancio, coi segmenti lunghi un tredicesimo della lunghezza del cavo: tesa diventa una linea, lenta si piega, libera penzola col gancio più pesante, e riavvolta si raccoglie sotto il drone. Un cavo lento si appoggia sul bordo del posto e non passa mai sulle parole. Ogni fotogramma la catena diventa un path SVG con curve di Bézier fra i punti medi, e il gancio si gira lungo il cavo (o dritto sul bordo, quando tiene).
Il drone, disegnato in SVG
Il drone è un gruppo SVG: il guscio con una sfumatura dal grigio al quasi nero, la fascia arancione ritagliata sul guscio, il visore, le braccia, le zampe e gli argani. Ogni elica è un disco sfocato (una sfumatura che svanisce ai lati) con sopra una pala che si allarga e si stringe col coseno del suo angolo, come una pala che gira vista di taglio. Il ciclo di disegno si ferma da solo quando non c’è più niente in volo.
Gesti, tastiera e movimento ridotto
Mentre vola la notifica è inert; posata, i pulsanti funzionano, una riga role="status" la legge e, se il fuoco era sulla notifica chiusa, passa alla croce di quella nuova. Esc la chiude. Il trascinamento di lato decide il verso dopo sei pixel (in verticale la pagina scorre); lasciato, un lancio diventa velocità e rotazione dei quattro punti, che cadono liberi. LIFE, se è più di zero, fa venire il drone da solo, ma l’attesa si ferma sotto il puntatore e col fuoco dentro.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FLY | script.js | 1.3 | I secondi in cui il drone arriva con una notifica. |
LOWER | script.js | 0.9 | I secondi in cui cala la notifica al suo posto. |
COLLECT | script.js | 0.8 | I secondi in cui un drone torna a prendere una notifica chiusa. |
CABLE | script.js | 120 | Quanto sono lunghi i cavi mentre il drone porta la notifica, in pixel. |
GRIP | script.js | 0.2 | Dove i ganci tengono il bordo di sopra, da ogni capo: 0.05 vicino agli angoli, 0.35 vicino al centro. |
TILT | script.js | 1 | Quanto si inclina il drone in volo: 0 dritto, 2 molto. |
SWAY | script.js | 2 | Quanto presto si calma il dondolio: 0.3 dondola a lungo, 5 quasi niente. |
LIFE | script.js | 0 | I secondi dopo cui un drone viene a prendere la notifica da solo (0: resta finché la chiudi). |
FIRST | script.js | 0.5 | I secondi prima che arrivi la prima notifica. |
MESSAGES | script.js | quattro, da Your order has shipped a Return picked up | Le notifiche, a turno: il pacco disegnato (box, route, open, return), il titolo, la riga sotto e il pulsante. |
Quando usarla
Per le notifiche di un negozio online o di un’app di consegne, dove l’avviso parla proprio di un pacco: spedito, in consegna, consegnato, reso. Una notifica alla volta, con un titolo e una riga; l’arrivo dura circa tre secondi, quindi sta bene dove le notifiche sono poche e importanti, non dove arrivano a raffica. Su un sito più sobrio si può accorciare FLY e alzare SWAY.
Sul telefono
La notifica prende la larghezza dello schermo meno 32 pixel (358 a 390) e sotto i 420 pixel gli spazi e il testo si stringono un poco; i ganci restano a un quinto da ogni capo, quindi i cavi si aprono un po’ meno. I droni entrano e escono dai bordi dello schermo. Uno swipe di lato la lancia via; in verticale la pagina scorre come sempre. La croce ha un’area di tocco più grande di quella disegnata.
Con il movimento ridotto
Niente droni, niente cavi e niente dondolii: la notifica compare in dissolvenza al suo posto e se ne va in dissolvenza, con la croce, con Track, con Esc o con uno swipe, e la notifica dopo compare in dissolvenza.
Trappole
- Il drone partiva da fermo e il bersaglio scattava subito alla massima velocità: lo strattone faceva girare la notifica di quasi 45 gradi, fin sopra il drone. Ora il drone entra già alla velocità di crociera, con la notifica che si muove con lui, e frena solo nell’ultima parte del volo.
- Con il bersaglio in power2.out il drone frenava per tutto il volo, e la notifica restava inclinata di 25 gradi dall’inizio alla fine: un volo vero è crociera e poi frenata.
- Lo smorzamento contro l’aria faceva restare la notifica sempre indietro durante il volo. Il dondolio si smorza rispetto alla velocità del drone che la porta; nell’aria resta solo un attrito leggero per la notifica lanciata.
- Calata con un po’ di cavo in più, la catena lenta di un cavo cadeva davanti alla notifica e passava sulle parole. Ora i cavi si allentano di pochi pixel e ogni punto delle catene si appoggia sul bordo di sopra del posto, come su un tavolo.
- Il drone che porta via la notifica vecchia e quello che porta la nuova sul telefono passavano a pochi pixel l’uno dall’altro, le due notifiche quasi una sull’altra: la nuova parte 0,7 secondi dopo che la vecchia ha preso il largo.
- Il clic dell’anteprima arriva anche mentre la notifica vola: finché non è posata la notifica è inert e il clic non fa niente, e il poster si fa col clic dell’anteprima (posterClic) per non aspettare la fine del volo.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 13 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.
