La scarpa in vista esplosa

Scroll, SVGGSAPImpegnativaPeso compresso: Demo 19 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Una scarpa da corsa su un banco da disegno: scorrendo escono prima i lacci, poi tutta la scarpa si apre in vista esplosa, strato per strato (linguetta, tomaia, contrafforte, soletta, intersuola, suola), e ogni pezzo riceve una linea di richiamo con il nome del materiale. Uno scanner passa sui pezzi e li tinge di un colore nuovo, poi la scarpa si rimonta dal basso, un pezzo alla volta, con un rimbalzo a ogni atterraggio.

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 exploded sneaker</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the header of the made-up running shoe maker -->
  <header class="testata">
    <p class="marchio">Ondo<span>Lab</span></p>
    <nav class="menu" aria-label="Main">
      <a href="#banco">Road</a>
      <a href="#banco">Trail</a>
      <a href="#fine">Stores</a>
    </nav>
  </header>

  <main>
    <!-- the bench: a tall section with a still stage; scrolling takes the shoe apart and puts it back together -->
    <section class="banco" id="banco" data-banco>
      <div class="palco" data-palco>
        <!-- the model's name, huge, behind everything: its letters spread with the parts -->
        <p class="sfondo" aria-hidden="true" data-sfondo>
          <span>S</span><span>T</span><span>R</span><span>A</span><span>T</span><span>A</span>
        </p>

        <svg class="mondo" data-mondo aria-hidden="true"></svg>

        <!-- the leader lines and the labels of the materials (the script places them every frame) -->
        <svg class="fili" data-fili aria-hidden="true"></svg>
        <div class="etichette" data-etichette>
          <article class="etichetta" data-parte="laces">
            <h3 class="etichetta__nome"><span>Laces</span></h3>
            <p class="etichetta__materia"><span>Recycled polyester, flat weave</span></p>
            <p class="etichetta__dato"><span>6 g</span></p>
          </article>
          <article class="etichetta" data-parte="tongue">
            <h3 class="etichetta__nome"><span>Tongue</span></h3>
            <p class="etichetta__materia"><span>Gusseted knit, 3 mm padding</span></p>
            <p class="etichetta__dato"><span>14 g</span></p>
          </article>
          <article class="etichetta" data-parte="upper">
            <h3 class="etichetta__nome"><span>Upper</span></h3>
            <p class="etichetta__materia"><span>Engineered mesh, one piece</span></p>
            <p class="etichetta__dato"><span>58 g</span></p>
          </article>
          <article class="etichetta" data-parte="counter">
            <h3 class="etichetta__nome"><span>Heel counter</span></h3>
            <p class="etichetta__materia"><span>Moulded TPU cup</span></p>
            <p class="etichetta__dato"><span>12 g</span></p>
          </article>
          <article class="etichetta" data-parte="insole">
            <h3 class="etichetta__nome"><span>Insole</span></h3>
            <p class="etichetta__materia"><span>Perforated foam, 4 mm</span></p>
            <p class="etichetta__dato"><span>16 g</span></p>
          </article>
          <article class="etichetta" data-parte="midsole">
            <h3 class="etichetta__nome"><span>Midsole</span></h3>
            <p class="etichetta__materia"><span>Strata foam, 36 mm at the heel</span></p>
            <p class="etichetta__dato"><span>98 g</span></p>
          </article>
          <article class="etichetta" data-parte="outsole">
            <h3 class="etichetta__nome"><span>Outsole</span></h3>
            <p class="etichetta__materia"><span>Rubber lugs where you land</span></p>
            <p class="etichetta__dato"><span>44 g</span></p>
          </article>
        </div>

        <!-- the opening, next to the whole shoe -->
        <div class="apertura" data-apertura>
          <p class="apertura__etichetta" data-entra>The Strata, on the bench</p>
          <h1 class="apertura__titolo">
            <span class="riga"><span data-riga>Seven parts.</span></span>
            <span class="riga"><span data-riga><em>One stride.</em></span></span>
          </h1>
          <p class="apertura__testo" data-entra>Our everyday runner, taken apart layer by layer. Scroll to pull every piece out, then watch it go back together in a new colour.</p>
          <p class="cenno" data-entra>
            Scroll to take it apart
            <svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
          </p>
        </div>

        <!-- a caption for every moment of the bench -->
        <div class="didascalie" data-didascalie>
          <p class="didascalia"><span>Laces out first.</span></p>
          <p class="didascalia"><span>Then the stack comes apart.</span></p>
          <p class="didascalia"><span>Seven parts, 248 g.</span></p>
          <p class="didascalia"><span>Dipped in <em data-nome-colore>Glacier</em>.</span></p>
          <p class="didascalia"><span>Back together, bottom up.</span></p>
        </div>

        <!-- the close, where the opening was -->
        <div class="chiusura" data-chiusura>
          <p class="chiusura__etichetta" data-chiude>Strata in <span data-nome-colore>Glacier</span></p>
          <h2 class="chiusura__titolo">
            <span class="riga"><span data-chiude-riga>Same shoe.</span></span>
            <span class="riga"><span data-chiude-riga><em>New weather.</em></span></span>
          </h2>
          <p class="chiusura__prezzo" data-chiude>$140, ships in March</p>
          <a class="pillola" href="#fine" data-chiude><span class="pillola__fondo"></span><span class="pillola__testo">Pre-order</span></a>
        </div>

        <!-- the colourways: a tap dips the shoe again -->
        <div class="colori" data-colori role="group" aria-label="Colourway">
          <button type="button" class="colore" data-colore="clay"><span>Clay</span></button>
          <button type="button" class="colore" data-colore="glacier"><span>Glacier</span></button>
          <button type="button" class="colore" data-colore="ember"><span>Ember</span></button>
        </div>
      </div>
    </section>

    <footer class="fine" id="fine">
      <p class="fine__frase">Built in layers. <em>Worn as one.</em></p>
      <p class="fine__nota">Ondo Lab, running shoes made to be taken apart and resoled.</p>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.

87 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 scarpa in vista esplosa» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

La pagina di un marchio inventato di scarpe da corsa, Ondo Lab. In apertura, su un fondo grigio chiaro con la griglia di un disegno tecnico, c’è il titolo «Seven parts. One stride.» e accanto la scarpa intera, la Strata, nel colore Clay (tomaia color avena, rinforzi terracotta, onda verde sul fianco), che all’arrivo cade sul banco con un rimbalzo. Dietro, enorme e solo disegnato, il nome del modello. Scorrendo il palco resta fermo. I lacci si sfilano per primi: lo zig zag fra gli occhielli si scioglie in un filo morbido e sale in alto. Poi la scarpa si apre: la linguetta sale e si inclina, la tomaia si alza, il contrafforte del tallone va indietro, la soletta resta scoperta sopra l’intersuola, l’intersuola e la suola scendono, ognuna con un piccolo oltre e ritorno. La telecamera si allontana quel tanto che serve per tenere tutti i pezzi sullo schermo, la griglia si fa più chiara e le lettere del nome si allargano con i pezzi. Accanto a ogni pezzo una linea di richiamo si disegna e l’etichetta sale riga per riga: nome, materiale, peso. I pezzi galleggiano piano, ognuno col suo ritmo. Poi arriva lo scanner, una linea sottile con due punte e il nome del colore nuovo: passando da sinistra a destra tinge ogni pezzo nel colore Glacier (ghiaccio, blu profondo, suola scura, onda corallo), e ogni pezzo fa un piccolo sobbalzo quando la linea ne passa il centro. Le etichette se ne vanno e la scarpa si rimonta dal basso: suola, intersuola, soletta, tomaia, contrafforte, linguetta e per ultimi i lacci, che tornano a zig zag; ogni pezzo atterra con un elastico. Alla fine la scarpa torna di lato e arriva la chiusura «Same shoe. New weather.» con il prezzo e il pulsante. In basso una didascalia per ogni momento; in basso a destra tre pulsanti di colore (Clay, Glacier, Ember): un tocco tinge il colore che si vede in quel momento, e tutti i pezzi fanno un saltello dal basso in alto. Con il mouse sopra un pezzo staccato il pezzo si alza un poco e il nome nell’etichetta si accende; sopra la scarpa intera la scarpa fa un saltello.

Come funziona

Un banco e una telecamera

La sezione è alta SCROLL_LENGTH schermi e dentro c’è un palco sticky alto 100lvh con un solo SVG, il cui viewBox è grande quanto il palco in pixel. La scarpa è disegnata di lato in unità del mondo (lunga circa mille) dentro un gruppo che fa da telecamera: a ogni fotogramma si calcola la scatola dei pezzi, per quanto sono usciti, e la si fa stare in una zona libera del palco, accanto al titolo all’inizio e alla fine, al centro con lo spazio per le etichette nel mezzo.

Un profilo, sette pezzi

Il fondo della suola, lo spessore della schiuma e la linea sopra l’intersuola sono tre piccole funzioni di x; suola, intersuola, soletta e il bordo basso della tomaia si disegnano seguendole, così i pezzi combaciano sempre. La soletta è la pianta del piede vista appena dall’alto: la sua mezza larghezza a ogni x, schiacciata, sopra la linea dell’intersuola. Ogni pezzo ha un perno, un vettore di uscita (uno per lo schermo largo e uno per quello stretto), una scatola e un punto da cui parte la linea di richiamo.

Il tempo come unico numero

Una timeline in pausa, guidata dallo scorrimento con scrub, muove pochi numeri: quanto è uscito ogni pezzo (con back.out all’uscita e un elastico al ritorno), dove sta la telecamera, dove passa lo scanner, quanto è disegnata ogni linea di richiamo. Le righe delle etichette, le didascalie e la chiusura sono tween nella stessa timeline. Un ticker trasforma i numeri in transform SVG, linee e posizioni, e aggiunge la deriva leggera dei pezzi sospesi.

Lacci ed etichette

I lacci sono un percorso ridisegnato a ogni fotogramma: i punti vanno dallo zig zag fra gli occhielli a un’onda morbida, e le maniglie delle curve crescono con la stessa misura, così il filo passa da spezzato a morbido. Le etichette sono HTML sopra il palco: il punto di attacco del pezzo si porta sullo schermo con la stessa rotazione del pezzo e la telecamera, le etichette di ogni lato si allontanano fra loro dall’alto in basso e la linea di richiamo si disegna con stroke-dashoffset.

Due pelli e uno scanner

Ogni pezzo è disegnato due volte: sotto con i colori di partenza, sopra con quelli nuovi, e i colori sono variabili --t- prese da due gruppi di variabili sull’SVG. La pelle nuova ha un clipPath con un rettangolo che arriva fino alla linea dello scanner, riportata nello spazio del pezzo. I pulsanti di colore fanno un tween dei colori della pelle che si vede e riscrivono le variabili a ogni passo, con un saltello di tutti i pezzi.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`SCROLL_LENGTH`	script.js	`8`	Quanti schermi di scorrimento dura tutto il banco.
`SPREAD`	script.js	`1`	Quanto si allontanano i pezzi nella vista esplosa.
`TILT`	script.js	`1`	Quanto si inclina ogni pezzo mentre è fuori (0 li tiene dritti).
`FLOAT`	script.js	`1`	Quanto galleggiano i pezzi sospesi (0 li tiene fermi).
`BOUNCE`	script.js	`1`	Quanto rimbalzano i pezzi quando tornano al loro posto (0 è un arrivo semplice).
`EYELETS`	script.js	`6`	Quanti occhielli attraversano i lacci.
`LABELS`	script.js	`true`	Mostrare le linee di richiamo e le etichette dei materiali.
`--glacier-tomaia`	style.css	`#d3e3ec`	La tomaia del colore nuovo; accanto ci sono gli altri cinque colori di Glacier e quelli di Clay (il colore di partenza) ed Ember.

Provali nel Playground

Quando usarla

Per mostrare di che cosa è fatto un prodotto: una scarpa, uno zaino, una giacca tecnica, un mobile da montare, un apparecchio. Funziona bene nella pagina di un modello, nel lancio di una nuova colorazione o di un prodotto riparabile, e ovunque si voglia raccontare materiali e pesi senza una tabella.

Sul telefono

Le stesse animazioni con le misure adattate: il titolo sta in alto e la scarpa sotto. Nella vista esplosa i pezzi si dispongono in righe, uno sotto l’altro (il contrafforte accanto alla linguetta), e ogni etichetta sta nello spazio sopra il suo pezzo, con il nome e il materiale; la linea di richiamo sale dritta. Le didascalie e i pulsanti di colore stanno in basso. Un tocco su un pezzo lo fa alzare; sulla scarpa intera la fa saltare.

Con il movimento ridotto

Niente pezzi che volano, niente deriva, niente rimbalzi né scorrimento morbido: il palco mostra quattro immagini ferme (la scarpa intera nel colore di partenza, la vista esplosa con le etichette, la vista esplosa tinta nel colore nuovo, la scarpa rimontata con la chiusura) e scorrendo la successiva arriva in dissolvenza. I pulsanti di colore cambiano il colore con una dissolvenza.

Trappole

La trama della maglia è un pattern SVG, e i suoi puntini non ereditano le variabili CSS dall’elemento che lo usa ma dagli antenati del pattern: con il colore della tomaia resterebbero senza colore. I puntini sono neri e bianchi trasparenti, così scuriscono e schiariscono qualunque colorazione.
Il clipPath della pelle nuova, con userSpaceOnUse, è nelle coordinate dell’elemento che lo usa, cioè del pezzo già spostato: la linea dello scanner va riportata nello spazio del pezzo togliendo il suo spostamento, altrimenti i pezzi spostati si tingerebbero in anticipo o in ritardo.
La telecamera inquadra la scatola dei pezzi con l’uscita limitata a 1: con l’elastico del ritorno i pezzi vanno un poco oltre, e una scatola che cambia con loro farebbe tremare tutta l’inquadratura.
Al telefono le etichette ai due lati coprivano i pezzi: in verticale la vista esplosa ha un suo vettore di uscita per ogni pezzo, a righe, con lo spazio per un’etichetta sopra ogni riga.
Passando col mouse sulla scarpa intera si entra in più pezzi uno dopo l’altro e la scarpa salterebbe a ogni pezzo: un salto alla volta, al massimo uno al secondo. Al telefono il tocco usa click e non pointerdown, altrimenti ogni trascinamento per scorrere sopra la scarpa la farebbe saltare.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Archivo (font variabile) 5.3.0, JetBrains Mono (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 19 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.

Collaudo

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