La riga che si srotola

SVG, TestoGSAPMediaPeso compresso: Demo 5,3 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: una linea sottile arrotolata stretta in una spirale si srotola lungo la pagina come un metro da sarta, rotolando e rimpicciolendo; dietro di lei cadono le tacche della misura e il nome di una camiceria su misura si alza dalla linea lettera per lettera. Poi si riavvolge dalla fine.

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 line that unrolls</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage aria-label="Lisle, made to measure. Click to roll it up and out again.">
    <!-- one thin line, rolled up tight: it unrolls along the page like a tape, the ticks of a measure and the name
         standing up behind it -->
    <svg class="scene" data-scene aria-hidden="true">
      <g class="ticks" data-ticks></g>
      <path class="tape" data-tape d="" />
      <line class="end" data-end />
    </svg>

    <h1 class="word" data-word>Lisle</h1>
    <p class="note" data-note>Shirts made to measure</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.

13 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 riga che si srotola» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo, a sinistra, una spirale sottile si avvolge dal capo esterno verso il centro: è una linea sola arrotolata stretta. Dopo un respiro si srotola verso destra come un metro da sarta spinto sul tavolo: il rotolo rotola senza scivolare, gira su sé stesso e diventa sempre più piccolo, e dietro di lui la linea resta stesa dritta. Mentre passa, sotto la linea cadono una dopo l’altra le tacche di una misura (corte, medie ogni cinque, lunghe e scure ogni dieci) e sopra la linea si alzano le lettere del nome, Lisle, in un serif morbido che prende peso salendo: escono dalla linea come da una fessura, vanno un filo oltre e si assestano. Quando l’ultimo ricciolo si spiana, tutta la linea vibra di qualche pixel e si ferma, una tacca arancio segna la fine e sotto compare Shirts made to measure. Dopo una pausa il rotolo si riforma alla fine e torna indietro riavvolgendo la linea, ingoiando le tacche e facendo rientrare le lettere; poi la spirale si disfa e tutto ricomincia. Un clic lo fa ripartire.

Come funziona

Un rotolo lungo quanto la linea

La spirale è archimedea, r(φ) = r₀ + p·φ/2π, e la sua lunghezza fino all’angolo φ è circa r₀φ + pφ²/4π. Si sceglie l’angolo totale perché il rotolo contenga esattamente la lunghezza della linea finita, risolvendo l’equazione di secondo grado. Così la linea non cambia mai lunghezza: quella stesa più quella ancora arrotolata è sempre la stessa.

Rotolare senza scivolare

GSAP anima un numero solo, la parte stesa (da 0 a 1). Da lì: il punto di contatto è all’inizio più la lunghezza stesa, l’angolo che resta nel rotolo viene dalla formula inversa, il centro sta un raggio sopra il contatto. Ogni punto della spirale si disegna all’angolo 90° − (Φ − φ), quindi man mano che Φ cala il rotolo gira in senso orario proprio come una ruota che va a destra.

Tacche e lettere legate al rotolo

Tacche e lettere non hanno un loro tween: la loro crescita è una funzione di quanto il rotolo le ha superate (in pixel), passata in una molla smorzata scritta a mano, 1 − e^(−kq)·cos(8q), con k calcolato perché superi l’altezza di SPRING una volta sola. Il nome sta in un riquadro con overflow hidden che finisce proprio sulla linea, così le lettere escono dalla linea; il peso va da 200 a 600 con la stessa q. Tornando indietro le stesse funzioni rientrano da sole.

La vibrazione finale

Quando l’ultimo ricciolo si spiana, la parte dritta si disegna come una polilinea che si piega a mezz’onda con ampiezza QUIVER·e^(−5t)·sin(34t): un solo arco che si smorza in un secondo, come un filo teso appena posato.

Giro e movimento ridotto

Una timeline sola in pausa: la spirale si avvolge (si disegna dal capo esterno), si srotola, vibra, arriva la tacca arancio, pausa, si riavvolge e la spirale si disfa; a onComplete riparte da zero. Con il movimento ridotto la misura stesa, col nome e la tacca, compare in dissolvenza e resta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Lisle'`	Il nome che si alza dalla linea.
`ROLL`	script.js	`3.2`	I secondi che la linea impiega a srotolarsi lungo la pagina.
`BACK`	script.js	`2.1`	I secondi che impiega a riavvolgersi.
`PITCH`	script.js	`1`	Quanto è largo il rotolo: 0.6 stretto, 1.6 con le spire più distanti.
`SPRING`	script.js	`0.04`	Di quanto lettere e tacche superano la loro altezza alzandosi: 0 = per niente, 0.1 = un decimo.
`QUIVER`	script.js	`3`	Di quanti pixel vibra tutta la linea quando si spiana: 0 = si ferma e basta.
`HOLD`	script.js	`2.2`	I secondi in cui la misura resta stesa.

Provali nel Playground

Quando usarla

Come apertura di una sartoria, una camiceria su misura, un negozio di tessuti, tappeti o passatoie; come titolo di una pagina «le misure» o di una guida alle taglie; ovunque una linea sottile possa portare il nome.

Sul telefono

Le stesse animazioni con le misure adattate: la linea è lunga quasi quanto lo schermo, il rotolo ha meno spire e il nome si rimpicciolisce per starci sopra.

Con il movimento ridotto

Niente rotola: la linea stesa con le tacche, il nome, la tacca arancio e la riga sotto compaiono in dissolvenza e restano.

Trappole

Con l’elastico di GSAP le lettere alte un quarto dello schermo andavano oltre di un terzo della loro altezza: un rimbalzo da cartone animato. Una molla smorzata scritta a mano permette di fissare l’overshoot esatto (4% di default).
Le lettere che si alzavano appena il rotolo arrivava al loro bordo sinistro gli passavano sopra mentre ci rotolava sotto: partono quando il rotolo ha superato il loro bordo destro di un raggio e mezzo.
Le tacche sono più di cento: si riscrivono solo quando la loro crescita cambia, non a ogni fotogramma.
Il rotolo arrotolato sporge a sinistra del punto di partenza di un raggio esterno: l’inizio della linea si calcola togliendo quel raggio, con qualche giro di approssimazione perché il raggio dipende dalla lunghezza.

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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

Collaudo

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