Il pulsante del tratteggio che si chiude

Pulsanti, SVG, TestoGSAPMediaPeso compresso: Demo 6,1 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su nero: il Save draft di un’app di note col contorno fatto di un tratteggio sottile che gira piano intorno alla pillola, come una selezione da confermare. Sotto il puntatore i trattini rallentano e le fessure si chiudono finché la riga è piena. Premuto, una riga arancione parte dall’alto e fa il giro della pillola chiudendo i trattini dietro di sé mentre la bozza si salva; quando si ritrova l’anello si chiude crescendo di un pixel, i segni di taglio agli angoli lampeggiano, si disegna una spunta e arriva Saved. Poi l’anello si riapre in trattini.

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 dashed outline button</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 dashed outline button: the Save draft of a notes app, on black. At rest the outline is a dashed line that
         slowly marches round the pill; under the pointer the gaps close and the line turns solid. Pressed, one orange
         line runs round the pill from the top and closes the dashes behind it as the draft saves; when it meets itself
         the ring closes with a one pixel overshoot, a tick is drawn and Saved lands. Then the ring opens into dashes
         again. Four crop marks at the corners feel every step -->
    <div class="dash" data-dash>
      <div class="dash__frame">
        <svg class="dash__marks" aria-hidden="true" data-marks>
          <path class="dash__mark" data-mark></path>
          <path class="dash__mark" data-mark></path>
          <path class="dash__mark" data-mark></path>
          <path class="dash__mark" data-mark></path>
        </svg>
        <button class="dash__btn" type="button" data-btn data-autoclic>
          <svg class="dash__line" aria-hidden="true" data-line>
            <g data-ring>
              <path class="dash__ink" data-ink></path>
              <path class="dash__run" data-run></path>
            </g>
          </svg>
          <span class="dash__words">
            <span class="dash__word" data-word="rest">Save draft</span>
            <span class="dash__word dash__word--busy" data-word="busy" aria-hidden="true">Saving</span>
            <span class="dash__word dash__word--done" data-word="done" aria-hidden="true">
              <svg class="dash__tick" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8.6 6.3 12.2 13.6 4.2" data-tick></path></svg>
              <span data-done-text>Saved</span>
            </span>
          </span>
        </button>
      </div>
      <p class="dash__note" data-note>Draft · 1,240 words</p>
      <p class="sr" aria-live="polite" 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.

20 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 «Il pulsante del tratteggio che si chiude» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero una pillola alta 60 pixel col contorno fatto di un tratteggio grigio sottile, che gira piano intorno a lei come le formiche in marcia di una selezione; dentro, Save draft in Archivo. Agli angoli, appena fuori, quattro segni di taglio a forma di L, e sotto la riga piccola Draft · 1,240 words. Passandoci sopra i trattini rallentano e le fessure si chiudono finché il contorno è una riga piena color bianco caldo, la scritta si allarga e prende peso su una molla e i segni di taglio si avvicinano. Premuta, la pillola cede un poco; la scritta si stringe e sale fuori, compare piccola e spaziata la parola Saving, e una riga arancione parte dal centro in alto e fa il giro in senso orario, piena dietro di sé e sopra i trattini, che si stringono man mano che si avvicina alla fine; a metà esita un attimo, come un salvataggio vero. Quando ritrova il suo inizio i trattini spariscono, l’anello cresce di un pixel e si assesta, i segni di taglio scattano verso la pillola e lampeggiano arancioni uno dopo l’altro, si disegna una spunta e arriva Saved, prima larga e leggera, poi stretta e pesante. La riga sotto diventa Saved to Notebook · just now. Dopo un momento l’arancione si scioglie nel bianco caldo, l’anello si riapre in trattini che ricominciano a girare e torna Save draft.

Come funziona

Un contorno solo, che parte dall’alto

Il contorno è un tracciato SVG della pillola che comincia al centro del lato di sopra e gira in senso orario, ricalcolato in pixel sulla misura vera del pulsante. Lo stesso tracciato serve due volte: una per i trattini e una, sopra, per la riga arancione.

Trattini che camminano e fessure che si chiudono

I trattini sono un stroke-dasharray di DASH pieno e GAP vuoto: la marcia è solo lo stroke-dashoffset che avanza a ogni fotogramma, e chiudere le fessure è solo portare a zero il secondo numero. La velocità della marcia è proporzionale alla fessura, così i trattini rallentano mentre si chiudono e una riga piena sta ferma. Il colore passa dal grigio al bianco caldo con color-mix fra le due variabili di :root, così la Palette del Playground li ricolora.

La riga che fa il giro

La riga arancione ha un dasharray di (avanzamento per lunghezza) pieno e il resto vuoto: GSAP porta l’avanzamento da 0 a 1 in tre tratti, veloce, un’esitazione a metà e la corsa finale, mentre le fessure dei trattini davanti si stringono. Quando si chiude, i trattini spariscono e il gruppo dell’anello cresce di (larghezza più 2) diviso larghezza, cioè un pixel per lato, e torna con una molla.

Le parole e i segni di taglio

Archivo ha gli assi di larghezza e di peso: Saved parte larga 118 e peso 300 e atterra stretta 98 e peso 600, un pixel più in alto e poi al suo posto. I quattro segni di taglio sono ridisegnati a ogni passo a una distanza dagli angoli che GSAP muove: si avvicinano sotto il puntatore, scattano alla chiusura e lampeggiano arancioni uno dopo l’altro.

Accessibile

È un button vero; una riga aria-live annuncia il salvataggio; il fuoco da tastiera ha l’anello solo quando si usa la tastiera. Durante il giro i clic si ignorano. Col movimento ridotto i trattini stanno fermi e al clic il contorno diventa arancione e le parole si scambiano in dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`LABEL`	script.js	`Save draft`	Le parole a riposo.
`BUSY`	script.js	`Saving`	La parola piccola mentre la riga fa il giro.
`DONE`	script.js	`Saved`	Le parole a salvataggio fatto.
`NOTE`	script.js	`Draft · 1,240 words`	La riga piccola sotto la pillola.
`NOTE_DONE`	script.js	`Saved to Notebook · just now`	La riga piccola a salvataggio fatto.
`DASH`	script.js	`9`	La lunghezza di ogni trattino del contorno, in pixel.
`GAP`	script.js	`6`	Lo spazio fra due trattini, in pixel.
`MARCH`	script.js	`14`	Quanto corrono i trattini intorno alla pillola, in pixel al secondo.
`SAVE`	script.js	`1.9`	I secondi in cui la riga arancione fa il giro.
`HOLD`	script.js	`1.6`	I secondi in cui resta Saved prima che l’anello si riapra.

Provali nel Playground

Quando usarla

Per un pulsante di salvataggio o di invio che deve far vedere che il lavoro è al sicuro: la bozza di un editor, le impostazioni di un’app, un modulo lungo, un file che si carica.

Sul telefono

La pillola si stringe fino a 32 pixel dai bordi e il contorno si ricalcola sulla larghezza vera. Il tocco preme la pillola come il clic e fa partire il salvataggio; le fessure che si chiudono al passaggio ci sono solo col mouse.

Con il movimento ridotto

I trattini stanno fermi; al clic il contorno diventa arancione in dissolvenza e le parole si scambiano, senza giro e senza rimbalzi.

Trappole

Cliccando col puntatore sopra, il tween dell’hover che chiude le fessure era ancora in corsa e, finito, rimetteva i trattini bianchi a metà salvataggio: all’inizio del salvataggio i tween dello stato si fermano tutti (killTweensOf).
Save draft che esce e Saving che entra si sovrapponevano per un attimo: Saving entra solo quando la scritta di prima è uscita, e la riga arancione parte subito dopo.
Con le fessure a zero il dasharray va tolto del tutto (none), e la marcia si ferma: un tratteggio con fessura quasi nulla che continua a scorrere fa tremare il contorno pieno.
Il contorno va ricalcolato quando arriva il carattere e quando la pillola cambia misura (ResizeObserver): la lunghezza del tracciato decide quanto è lunga la riga arancione.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 6,1 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 23 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.