Il menu che si apre dal pulsante
Menu, Transizioni, Testo
Gratis
Tutti i componenti
La notifica dalla riga
Nello stile minimal: la notifica di un salvataggio nasce da una riga arancione sottile, che si allunga dal centro, si apre in altezza come una fessura e diventa la notifica, mentre le parole salgono riga per riga, strette e leggere, e si allargano posandosi. La riga resta sul bordo di sotto e misura il tempo per annullare; Undo la richiude nella riga e la riapre con le parole nuove, e più notifiche si impilano facendosi posto con una molla vera.
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>The toast from a 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>
<main class="stage">
<!-- the Save draft button of a writing app and, under it, the room for its notifications. Each notification is
born from a thin line: the line stretches out from the middle, opens like a slit into the notification and
the words come up out of it one line at a time. The orange line along its bottom edge is the time left to
undo. Undo closes it back into the line and it opens again with the new words; a swipe, the cross or Esc
fold it into the line and slide it away. The notifications are made by script.js -->
<div class="desk" data-desk>
<div class="desk__head">
<button class="save" type="button" data-save data-autoclic>
<span class="save__rim" aria-hidden="true"></span>
<span class="save__label">Save draft</span>
</button>
</div>
<ol class="stack" aria-label="Notifications" data-stack></ol>
<p class="sr" role="status" aria-live="polite" aria-atomic="true" data-live></p>
</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.
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 «La notifica dalla riga» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero un pulsante disegnato con una riga sottile, Save draft, alto 52 pixel; sotto il puntatore la riga si gonfia appena con un rimbalzo e la scritta si allarga sull’asse della larghezza. Premendolo, sotto compare una riga arancione sottile che si allunga dal centro verso i due lati; alle sue estremità spuntano due tacche, come in una quota di un disegno tecnico. Poi la riga si apre in altezza come una fessura: una riga grigia sale, quella arancione scende, e fra le due si scopre la notifica, alta 70. Le parole salgono dalla riga una dopo l’altra, Draft saved, Slow mornings · 1,221 words, Undo e la croce: arrivano strette e sottili e si allargano e prendono peso mentre si posano, con un pixel di troppo e il ritorno. La riga arancione resta sul bordo di sotto ed è il tempo per annullare: si ritira verso il centro e le due tacche le vanno dietro. Col puntatore sopra, col focus della tastiera dentro o col dito che la tiene il tempo si ferma e le tacche si allungano. Undo richiude la notifica nella riga, il tempo torna a riempire la riga, e la notifica si riapre con Save undone e Back to 1,204 words. Quando il tempo finisce la notifica si richiude nella riga e la riga si ritira nel centro. Trascinata di lato col dito o col mouse, con la croce o con Esc, si ripiega nella riga e scivola via. Ogni salvataggio fa una notifica nuova in cima e le altre scendono a farle posto con una molla; quando una se ne va le altre risalgono. Tre al massimo: una in più chiude subito la più vecchia. All’apertura della pagina arriva una prima notifica da sola.
Come funziona
Una notifica fatta di pochi numeri
Ogni notifica è un oggetto con cinque numeri: quanto è lunga la riga, quanto è aperta, quanto tempo resta, quanto si vedono le tacche e quanto sono tenute. GSAP anima solo quei numeri, e una funzione sola li traduce nella pagina: le tre righe sottili (il bordo di sopra, quello di sotto e il tempo arancione) si spostano e si allungano con un transform, il fondo si scopre con un clip-path in pixel che si chiude dal centro, le tacche stanno sempre alle estremità del tempo rimasto.
Le parole che salgono dalla riga
Ogni riga di parole ha la sua finestra con overflow nascosto; dentro, il testo sale da sotto con back.out e uno sfalsamento di STAGGER. Intanto due variabili CSS, --wd e --wg, passano da NARROW e 260 alla larghezza e al peso giusti di ogni riga (il titolo si posa largo, a 112): il font-variation-settings di Archivo le legge, e le lettere si allargano e prendono peso mentre si posano. Richiudendo vanno verso il centro, si stringono e svaniscono prima che le due righe si incontrino, così non si sovrappongono mai.
Il tempo e Undo
Il tempo per annullare è un tween di GSAP di un numero solo, da 1 a 0 in LIFE secondi, che si ferma sotto il puntatore, col focus dentro e col dito sopra (un insieme dei motivi per cui è tenuta: finché non è vuoto il tween resta in pausa). Undo chiude la notifica nella riga, riporta il tempo a 1 sulla riga chiusa, cambia le parole e la riapre, con HOLD secondi davanti.
La pila con FLIP e una molla vera
Prima di ogni cambio (una notifica che arriva, una che se ne va) si misura dove sta ogni posto della lista; poi si cambia la lista, si rimisura, e ogni posto parte da dov’era e va al suo posto nuovo. L’andatura è una molla smorzata risolta esattamente, 1 − e^(−ζωt)(cos ωd t + ζω/ωd sin ωd t), passata a GSAP come ease: con ζω fisso la molla si è sempre fermata alla fine del tween, e con DAMPING 0,8 va oltre di un pixel e torna.
Il dito, Esc e il giro dell’anteprima
Al pointerdown la notifica cattura il puntatore; dopo 6 pixel si sceglie la direzione: di lato segue il dito, in verticale lascia scorrere la pagina (touch-action: pan-y). Lasciata oltre 110 pixel o lanciata veloce si ripiega e scivola via, se no torna con la molla. Esc manda via quella col focus o la più nuova. Il clic che fa l’anteprima da sola (detail 0 e nessun tasto premuto) fa invece un giro intero in una timeline di GSAP: tre salvataggi, Undo sulla più nuova, una mandata via di lato, la più vecchia che finisce il tempo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LIFE | script.js | 5 | I secondi per annullare: la riga arancione sotto la notifica (si ferma sotto il puntatore). |
HOLD | script.js | 1.8 | I secondi in cui resta la notifica dopo Undo. |
DRAW | script.js | 0.42 | I secondi in cui la riga si allunga dal centro. |
OPEN | script.js | 0.55 | I secondi in cui la riga si apre nella notifica. |
STAGGER | script.js | 0.08 | I secondi fra una riga di parole che sale e la successiva. |
DAMPING | script.js | 0.8 | La molla della pila che fa posto: 1 senza andare oltre, 0,4 qualche rimbalzo. |
NARROW | script.js | 66 | La larghezza delle lettere quando salgono dalla riga (62 la più stretta, 100 normale). |
MAX | script.js | 3 | Quante notifiche al massimo: una in più chiude la più vecchia. |
FIRST | script.js | 0.7 | I secondi prima che arrivi da sola una prima notifica (0: nessuna). |
TITLE | script.js | Draft saved | Il titolo della notifica. |
UNDONE | script.js | Save undone | Il titolo dopo Undo. |
DOC | script.js | Slow mornings | Il nome della bozza. |
WORDS | script.js | 1204 | Le parole della bozza all’inizio. |
Quando usarla
Per un’azione che si può ancora disfare per qualche secondo: un salvataggio, un archivio, un’email spostata, una modifica in un’app di scrittura o in un pannello. La riga che misura il tempo dice quanto resta senza numeri, e la nascita dalla riga sta bene nelle interfacce sobrie, tipografiche, su fondo scuro.
Sul telefono
La colonna prende la larghezza dello schermo meno 32 pixel (358 a 390). Le notifiche si mandano via trascinandole di lato col dito, mentre in verticale la pagina scorre; il dito sopra ferma il tempo, Undo è alto 30 pixel e la croce ha un’area di tocco più grande di quella disegnata.
Con il movimento ridotto
Niente riga che si allunga e niente fessura che si apre: la notifica compare in dissolvenza già aperta, le parole in dissolvenza al loro posto, e la pila cambia di colpo senza molla. La riga del tempo continua a ritirarsi, perché è un’informazione; Undo cambia le parole in dissolvenza e le notifiche se ne vanno sbiadendo.
Trappole
- Un clip-path in percentuale non si anima bene con GSAP, che non rilegge le percentuali dal CSS: il fondo si apre con un inset in pixel calcolato a ogni fotogramma dall’altezza misurata, e le misure si rifanno al resize anche a metà animazione.
- Richiudendo, il titolo scende e la riga sotto sale: alla prima prova si incrociavano a metà e per un attimo stavano una sopra l’altra. Ora svaniscono in poco più di metà del tempo e fanno solo metà strada, così le due righe si incontrano quando le parole non ci sono più.
- Con FLIP ogni posto va misurato dov’è davvero, anche mentre si muove ancora: si legge il getBoundingClientRect con il transform in corso, poi si azzera il transform, si rimisura e si riparte dalla differenza, così due cambi uno sopra l’altro non fanno saltare la pila.
- Una molla usata come ease deve essere ferma alla fine del tween, o l’ultimo fotogramma salta: lo smorzamento per la frequenza (ζω) è fisso, così con qualsiasi DAMPING alla fine resta meno di un decimillesimo.
- Anche Invio sul pulsante dà un clic con detail 0, come il clic dell’anteprima: un keydown di Invio o Spazio segna il clic come vero, così da tastiera si salva e non parte il giro dimostrativo.
- La finestra di ogni riga di parole taglia anche il contorno del focus di Undo: finita la salita la finestra si apre (overflow visible) e si richiude solo quando le parole tornano giù.
Librerie
GSAP 3.15.0, Archivo (font variabile, assi wdth e wght) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,3 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.
