Il codice che si trasforma

Codice, Testo, TransizioniGSAPImpegnativaPeso compresso: Demo 7,0 KBGSAP 28 KBGratisScarica lo zip

Un blocco di codice a passi: passando da un passo all'altro le parole che i due hanno in comune volano dal posto vecchio a quello nuovo, quelle nuove entrano dove stanno e quelle che non servono più svaniscono, mentre le righe del tutto nuove si accendono; il codice gira davvero su un quadratino sotto, e Copy lo copia e diventa una spunta.

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 code that changes</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/red-hat-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the code that changes: going to another step, the words the two steps share fly to their new places, the
         new ones come in and the old ones fade; the code runs for real on the box below, and Copy turns into a tick -->
    <section class="snippet" aria-label="Animate a box, step by step" data-snippet data-autoclic>
      <header class="snippet__bar">
        <div class="steps" role="tablist" aria-label="Steps" data-steps>
          <span class="steps__pill" aria-hidden="true" data-pill></span>
        </div>
        <button class="copy" type="button" data-copy>
          <svg class="copy__icon" viewBox="0 0 24 24" aria-hidden="true">
            <g data-sheets><rect x="8.5" y="8.5" width="11.5" height="11.5" rx="2.6"/><path d="M15.5 8.5V6.2a2.6 2.6 0 0 0-2.6-2.6H6.2a2.6 2.6 0 0 0-2.6 2.6v6.7a2.6 2.6 0 0 0 2.6 2.6h2.3"/></g>
            <path class="copy__tick" pathLength="1" d="M5 12.6l4.4 4.4L19 7.4" data-tick/>
          </svg>
          <span class="copy__label" data-copy-label><span>Copy</span></span>
        </button>
      </header>
      <pre class="code" role="tabpanel" data-code-box><code data-code></code><span class="code__gone" aria-hidden="true" data-gone></span></pre>
      <div class="result">
        <span class="result__label">Result</span>
        <div class="result__track"><span class="box" data-box></span></div>
        <button class="run" type="button" aria-label="Run the code again" data-run>
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12a7 7 0 1 1-2.05-4.95M19.2 4.6v4.2H15"/></svg>
        </button>
        <p class="result__error" hidden data-error>This code does not run</p>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </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.

23 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 codice che si trasforma» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un blocco di codice scuro: in alto tre passi (Move, Spin, Chain) e Copy, al centro il codice colorato per quello che è ogni parola (parole del linguaggio, funzioni, nomi prima dei due punti, testi, cifre, segni), in fondo Result con un quadratino arancione e un pulsante per rifarlo. Scegliendo un altro passo la pastiglia scivola sotto il nome, le parole che i due passi hanno in comune volano dal loro posto a quello nuovo, quelle nuove entrano dal basso dove stanno e quelle che non servono più svaniscono dove erano; il blocco si allunga o si accorcia insieme a loro e le righe nuove da capo a fondo si accendono d'arancio per un momento. Poi il quadratino torna all'inizio e il codice del passo gira davvero: scivola di lato, gira su se stesso con un rimbalzo e alla fine diventa un cerchio. Copy mette il codice negli appunti: i due fogli dell'icona si stringono e spariscono, si disegna una spunta e la parola rotola in Copied, e dopo un poco torna Copy.

Come funziona

Il codice tagliato in parole

Una regex taglia il codice in parole: a capo, spazi, testi fra virgolette, cifre, nomi e segni. Un nome è una parola del linguaggio se è in un elenco (const, let, function…), una funzione se dopo c'è una parentesi, un nome di proprietà se dopo ci sono i due punti. Ogni parola diventa uno span inline-block, ogni riga un blocco suo.

Ritrovare le stesse parole

Ogni span ha un nome: il suo testo e quante volte lo stesso testo è venuto prima (to#2 è il secondo to). I segni sono nominati anche con la parola che li precede, perché le virgole sono dappertutto e la virgola dopo 1 deve ritrovare la virgola dopo 1.

Il volo

Prima di cambiare si misura dove sta ogni parola (offsetLeft e offsetTop), poi si scrive il codice nuovo: le parole ritrovate partono spostate di quanto erano lontane e tornano a zero in MORPH secondi con power3.inOut; le nuove entrano dopo con una piccola salita, quelle rimaste senza posto diventano copie in uno strato sopra e svaniscono. L'altezza del blocco va da quella vecchia a quella nuova, e le righe tutte nuove si accendono.

Il codice che gira

Finito il volo il quadratino torna all'inizio, perde gli stili di prima (clearProps) e il codice del passo gira davvero con new Function dentro un gsap.context, che tiene in mano quello che crea: il giro dopo lo ferma con kill(). Se il codice ha un errore, sotto compare This code does not run.

Copy, i tasti e l'anteprima

Copy scrive negli appunti con navigator.clipboard, ma solo per un clic vero (isTrusted); se il browser dice di no seleziona il codice e la parola diventa Selected. L'icona è una timeline (fogli che si stringono, spunta disegnata con pathLength 1) e torna indietro dopo COPIED secondi. I passi sono schede (tablist) da cambiare con le frecce, Home e Fine. Un clic da script (l'anteprima della libreria) va al passo dopo e ogni terza volta preme Copy.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STEPS`	script.js	`[['Move', "gsap.to('.box', {…});"], …]`	I passi: il nome della scheda e il suo codice, che gira anche sul quadratino (che ha la classe box).
`MORPH`	script.js	`0.7`	I secondi che il codice impiega a diventare quello del passo dopo.
`COPIED`	script.js	`1.6`	I secondi che Copied resta prima di tornare Copy.

Provali nel Playground

Quando usarla

Per la documentazione di una libreria o di un'API, un tutorial a passi, il blog di uno sviluppatore, una pagina che mostra come si usa un prodotto, qualunque codice che cambia poco per volta.

Sul telefono

Sotto i 480 pixel il codice scende a 13 pixel e sta tutto nella larghezza; se una riga fosse più lunga il blocco scorre di lato senza barra. I tocchi non aspettano il doppio tocco (touch-action manipulation).

Con il movimento ridotto

Il codice cambia subito, senza voli; il quadratino va subito alla fine dell'animazione del passo; l'icona e la parola di Copy cambiano senza muoversi, e niente entrata.

Trappole

Un transform non sposta un elemento inline: le parole devono essere inline-block, e gli spazi restano testo fra loro.
Ritrovando le parole solo col testo, le virgole si scambiano di riga e mezzo codice si accende: i segni vanno nominati insieme alla parola che li precede.
Un cambio ancora in volo va chiuso (progress(1)) prima di misurare, o le parole vengono misurate a metà strada.
Gli appunti accettano di scrivere solo da un gesto vero e possono rifiutare: per un clic da script si mostra solo la spunta, e se il browser dice di no si seleziona il codice.
Il codice che gira va chiuso prima del giro dopo: gsap.context tiene in mano quello che crea e kill() lo ferma, poi clearProps toglie gli stili lasciati.

Librerie

GSAP 3.15.0, Red Hat Mono (font variabile) 5.3.0.

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