Le notifiche a pila

Notifiche, Transizioni, HoverGSAPImpegnativaPeso compresso: Demo 5,4 KBGSAP 28 KBGratisScarica lo zip

Le notifiche arrivano dal basso e si impilano una dietro l’altra, più piccole, mostrando solo il bordo; sotto il puntatore la pila si apre in una lista, e ognuna se ne va da sola, con la sua croce o trascinata via.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The stacked notifications</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button sends a notification; the notifications pile up at the bottom of the window, the newest in front.
         Under the pointer (or with the focus inside) the pile opens into a list; each one goes by itself after a
         few seconds, or with its cross, or dragged away. The notifications are made by the script -->
    <button class="bell" type="button" data-bell data-autoclic>
      <svg viewBox="0 0 24 24" aria-hidden="true" data-bell-icon><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15zM10 20.5a2 2 0 0 0 4 0"/></svg>
      <span>Show a notification</span>
    </button>
    <!-- a strip of the page's own black along the bottom edge, under the notifications: Safari on iPhone colours the
         band under its bar from a fixed element at the bottom, and without it would take the white notifications -->
    <span class="floor" aria-hidden="true"></span>
    <section class="toasts" aria-label="Notifications" data-toasts>
      <ol class="toasts__list" aria-live="polite" data-list></ol>
    </section>
  </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.

33 valori da cambiare

Apri il Playground

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 «Le notifiche a pila» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un pulsante chiaro con una campanella, Show a notification. Premendolo la campanella suona dondolando e una notifica bianca sale dal fondo della finestra con un piccolo rimbalzo: un’icona colorata, un titolo, una riga di testo e una croce. Le notifiche si impilano: la più nuova davanti, le più vecchie dietro, ognuna un po’ più piccola e più in alto, così che se ne vede solo il bordo, fino a tre. Sotto il puntatore, o col focus dentro, la pila si apre in una lista e nessuna se ne va finché resta aperta; togliendo il puntatore si richiude. Ogni notifica se ne va da sola dopo cinque secondi, oppure con la sua croce, oppure trascinata: in giù, o di lato. Sul telefono un tocco apre e chiude la pila. All’apertura della pagina arriva una prima notifica da sola.

Come funziona

Una notifica

Ogni notifica è un elemento di lista fatto dallo script da uno dei MESSAGES: un’icona SVG del colore del messaggio, il titolo, una riga di testo e una croce che dice cosa chiude. Sono tutte alte uguali (il testo che non ci sta si taglia coi tre puntini), così la pila si allinea.

La pila e la lista

A ogni cambio lo script calcola il posto di ognuna, dalla più nuova: chiusa, ogni notifica dietro sale di PEEK pixel e rimpicciolisce di SHRINK, e oltre VISIBLE svanisce; aperta, ognuna sta sopra l’altra con uno spazio. La nuova arriva da sotto con back.out(SPRING), le altre vanno al loro posto con power3.out.

Il tempo

Ogni notifica ha un delayedCall di GSAP che la manda via dopo LIFE secondi; aprendo la pila tutti i tempi si fermano e richiudendola ripartono. Oltre MAX notifiche la più vecchia se ne va subito.

Trascinare

Al pointerdown la notifica cattura il puntatore; dopo 6 pixel si decide la direzione: di lato la notifica segue il dito e sbiadisce, in giù scende (in su si muove appena). Lasciata oltre 90 pixel di lato o 40 in giù, o lanciata veloce, vola via; altrimenti torna al suo posto.

Puntatore, tastiera e dito

La pila si apre al pointerenter del mouse e col focus dentro (focusin), e si richiude quando escono; aperta, uno pseudo-elemento tiene lo spazio sopra la prima, così il puntatore può salire fra le altre senza chiuderla. La lista è aria-live polite, così gli screen reader leggono le notifiche nuove.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LIFE`	script.js	`5`	I secondi in cui resta una notifica.
`VISIBLE`	script.js	`3`	Quante notifiche si vedono nella pila chiusa.
`PEEK`	script.js	`14`	Quanto spunta ogni notifica dietro sopra quella davanti, in pixel.
`SHRINK`	script.js	`0.055`	Quanto è più piccola ogni notifica dietro.
`SPRING`	script.js	`1.4`	Quanto va oltre una notifica nuova mentre arriva.
`MAX`	script.js	`5`	Quante notifiche si tengono al massimo.
`MESSAGES`	script.js	`cinque, da Changes saved a Reminder set`	I messaggi, a turno: l’icona, il suo colore, il titolo e la riga di testo.

Provali nel Playground

Quando usarla

Per confermare un’azione senza fermare chi la fa: un salvataggio, un invio, un caricamento, la connessione tornata. Testi brevi, una riga di titolo e una di dettaglio.

Sul telefono

Le notifiche prendono la larghezza dello schermo meno un margine e stanno in fondo; un tocco sulla pila la apre e la chiude, e col dito si mandano via trascinandole in giù o di lato.

Con il movimento ridotto

Le notifiche compaiono e spariscono in dissolvenza, la pila e la lista cambiano di colpo e la campanella non suona; trascinarle via funziona lo stesso.

Trappole

Le notifiche dietro devono essere alte quanto quella davanti, o i loro bordi spunterebbero di misure diverse: qui sono tutte della stessa altezza e il testo lungo si taglia coi tre puntini.
Aperta, la lista è più alta del suo contenitore: senza lo spazio tenuto da uno pseudo-elemento, il puntatore che sale fra due notifiche uscirebbe dalla pila e la chiuderebbe.
Il trascinamento sceglie la direzione dopo qualche pixel e non la cambia più: decidendo a ogni movimento, un dito un po’ storto farebbe saltare la notifica fra le due direzioni.
Il tempo di una notifica si ferma mentre la si tocca o la pila è aperta: senza, una notifica potrebbe sparire proprio mentre la si sta leggendo o trascinando.
In Safari su iPhone la fascia sotto la barra in basso prende il colore da un elemento fixed vicino al bordo: senza una striscia del nero della pagina sotto le notifiche (la .floor) diventerebbe bianca come loro.
Su iPhone due tocchi veloci sul pulsante diventano un doppio tocco che ingrandisce la pagina: touch-action: manipulation sull’html lo impedisce.

Librerie

GSAP 3.15.0, Inter Tight (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,4 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.