La finestra che nasce dal pulsante

Finestre, TransizioniGSAPMediaPeso compresso: Demo 5,8 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Delete di una scheda diventa lui stesso la finestra che chiede conferma: la sua superficie viaggia verso il centro allargandosi e diventando bianca, con un piccolo slancio, e annullando torna dentro il pulsante; confermando, il pulsante si riempie come una barra, dice Deleted e la finestra si chiude nella scheda, che lascia il posto a Undo.

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 dialog from its button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/libre-franklin@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the dialog from its button: Delete grows into the window that asks to confirm, and goes back into it; deleting,
         the button fills up, the window closes into the card and the card gives way to an undo -->
    <section class="project" aria-label="Project" data-project data-autoclic>
      <div class="project__card" data-card>
        <div class="project__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24"><path d="M6 3.5h8l4 4V20a.5.5 0 0 1-.5.5h-11A.5.5 0 0 1 6 20z"/><path d="M14 3.5v4h4M9 12h6M9 15.5h6"/></svg>
        </div>
        <div class="project__text">
          <h2 class="project__title">Summer menu</h2>
          <p class="project__meta">12 dishes · 8 photos · edited today</p>
        </div>
        <div class="project__actions">
          <button class="btn btn--plain" type="button">Open</button>
          <button class="btn btn--danger" type="button" aria-haspopup="dialog" data-open>Delete</button>
        </div>
      </div>
      <div class="project__gone" hidden data-gone>
        <p class="project__gone-text">Summer menu was deleted.</p>
        <button class="btn btn--plain" type="button" data-undo>Undo</button>
      </div>
    </section>

    <div class="layer" hidden data-layer>
      <div class="layer__dim" data-dim></div>
      <div class="layer__shell" data-shell></div>
      <div class="dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-text" data-dialog>
        <div class="dialog__icon" aria-hidden="true">
          <svg viewBox="0 0 24 24"><path d="M4.5 7h15M10 4h4M6.5 7l.8 12.2a1 1 0 0 0 1 .8h7.4a1 1 0 0 0 1-.8L17.5 7M10.3 10.5v6M13.7 10.5v6"/></svg>
        </div>
        <h3 class="dialog__title" id="dialog-title">Delete “Summer menu”?</h3>
        <p class="dialog__text" id="dialog-text">Its 12 dishes and 8 photos go with it. You can still undo it straight after.</p>
        <div class="dialog__actions">
          <button class="btn btn--plain" type="button" data-cancel>Cancel</button>
          <button class="btn btn--solid" type="button" data-confirm>
            <span class="btn__fill" aria-hidden="true" data-fill></span>
            <span class="btn__label" data-label>Delete</span>
          </button>
        </div>
      </div>
    </div>
    <p class="sr" aria-live="polite" data-live></p>
  </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.

21 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 «La finestra che nasce dal pulsante» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco la scheda di un progetto: un’icona di documento, Summer menu, 12 dishes · 8 photos · edited today e due pulsanti, Open e Delete in rosso chiaro. Premendo Delete, il pulsante stesso cresce: la sua superficie si sposta al centro dello schermo allargandosi e arrotondandosi, passa dal rosa al bianco e si posa con un piccolo slancio, mentre la pagina si scurisce e dentro entrano, una dopo l’altra, l’icona del cestino, Delete “Summer menu”?, la spiegazione e i pulsanti Cancel e Delete. Cancel, Esc o un clic fuori fanno uscire i contenuti e rimpicciolire la finestra fino a tornare il pulsante. Delete si riempie da sinistra di un rosso più scuro con Deleting…, poi dice Deleted con una spunta che si disegna; la finestra si svuota, si stringe verso il centro della scheda e sparisce, mentre la scheda svanisce e al suo posto resta Summer menu was deleted con Undo, che la riporta indietro.

Come funziona

Una superficie sola

La finestra ha un fondo a sé, uno strato disegnato dal suo centro e dalla sua misura: parte dalla misura e dal posto del pulsante (che intanto si nasconde) e va a quelli della finestra, così cresce uguale da ogni lato. Il centro ci va con power3.out, la misura con back.out(BOUNCE): la finestra si posa con un piccolo slancio senza oscillare di lato. Il colore va dal rosa del pulsante al bianco.

I contenuti

I contenuti della finestra entrano quando la superficie è a poco meno di metà strada, uno dopo l’altro (0,05 secondi), salendo di 10 pixel; la pagina dietro si scurisce fino a DIM. La finestra risponde ai pulsanti appena si è posata, anche se i contenuti stanno ancora entrando.

Ritorno nel pulsante

Chiudendo, i contenuti escono dall’ultimo al primo e la superficie torna alla misura e al posto del pulsante in SHRINK secondi con power3.inOut, ridiventando rosa; poi il pulsante ricompare e riprende la focalizzazione.

Cancellare

Il pulsante di conferma ha dentro una barra (scaleX da 0 a 1 in LOAD secondi), poi la scritta diventa Deleted con una spunta disegnata con stroke-dashoffset. La superficie si stringe verso il centro della scheda svanendo, la scheda svanisce e il riquadro passa dalla sua altezza a quella della riga con Undo (un’altezza animata e poi tolta).

Tasti e anteprima

È un alertdialog con aria-modal: aprendosi porta la focalizzazione su Cancel, il Tab gira fra i suoi due pulsanti, Esc la chiude, la scheda dietro è inert, e chiudendosi la focalizzazione torna a Delete (o va su Undo). Una regione aria-live dice che il progetto è stato cancellato o è tornato. Un clic da script (l’anteprima della libreria) apre la finestra e annulla, la riapre e cancella, poi annulla la cancellazione, senza toccare la focalizzazione.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`GROW`	script.js	`0.5`	I secondi in cui il pulsante cresce fino a diventare la finestra.
`SHRINK`	script.js	`0.36`	I secondi in cui la finestra torna dentro il suo pulsante.
`DIM`	script.js	`0.32`	Quanto si scurisce la pagina dietro la finestra, da 0 a 1.
`LOAD`	script.js	`1.1`	I secondi della cancellazione (qui finta).
`BOUNCE`	script.js	`1.25`	Quanto la finestra va oltre la sua misura posandosi (back.out).

Provali nel Playground

Quando usarla

Per le conferme prima di un’azione che non si può annullare: cancellare, svuotare un carrello, lasciare una pagina con delle modifiche, disdire una prenotazione; oppure per un pulsante che apre un modulo breve.

Sul telefono

La finestra prende tutta la larghezza meno 16 pixel per lato e anche lì nasce dal pulsante; un tocco fuori la chiude.

Con il movimento ridotto

La finestra compare e sparisce al suo posto, senza crescere dal pulsante né tornarci, e la pagina si scurisce di colpo; la barra della cancellazione si riempie comunque, perché dice a che punto si è, e la scheda lascia il posto alla riga con Undo senza svanire.

Trappole

Scalare la finestra intera deforma il testo e gli angoli: cresce solo una superficie vuota (larghezza, altezza e raggio veri) e i contenuti entrano dopo, nella finestra già al suo posto.
Con back.out sulla misura, una superficie tenuta per l’angolo in alto a sinistra va oltre solo a destra e in basso: si disegna dal centro, così lo slancio è uguale da ogni lato.
Un elemento con display grid nel CSS non sparisce con l’attributo hidden: serve una regola [hidden] { display: none }.
Se i pulsanti rispondono solo alla fine di tutta l’entrata, un clic veloce va perso: la finestra è aperta appena la superficie si è posata.
Safari su iPhone colora le sue barre col colore di uno strato che copre lo schermo: un nero reso tenue con opacity le farebbe quasi nere, un colore trasparente (rgba) le lascia grigie come la pagina scurita.

Librerie

GSAP 3.15.0, Libre Franklin (font variabile) 5.3.0.

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