Il titolo avvolto sul cilindro

Testo, Scroll, 3DGSAP, Solo CSSImpegnativaPeso compresso: Demo 9,6 KBGSAP + ScrollTrigger 45 KBLenis 5,3 KBGratisScarica lo zip

Scorri dentro l’anteprima

Il titolo grande dell’apertura è avvolto su un cilindro 3D che gira mentre scorri, con le lettere più scure sui fianchi e dietro. Poi il cilindro si srotola come un tappeto: le lettere si staccano una dopo l’altra e si posano in una riga dritta, con un piccolo rimbalzo elastico. Più giù un secondo titolo fa il contrario: si arrotola, gira e se ne va.

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 title wrapped on a cylinder</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a made-up magazine about clay. The big title is wrapped on a turning cylinder, like the words
       painted around a pot on the wheel; scrolling turns it, then unrolls it letter by letter into a straight line.
       Further down a second title does the opposite: it rolls up and leaves -->
  <header class="testata">
    <a class="testata__marchio" href="#">Slip</a>
    <p class="testata__uscita">The autumn issue</p>
    <nav class="testata__nav" aria-label="Sections">
      <a class="rullo" href="#"><span data-t="Stories">Stories</span></a>
      <a class="rullo" href="#"><span data-t="Studios">Studios</span></a>
      <a class="rullo" href="#"><span data-t="Glazes">Glazes</span></a>
    </nav>
  </header>

  <main>
    <section class="giro" data-giro>
      <div class="palco">
        <p class="occhiello" data-occhiello>A quarterly on clay and the hands that shape it</p>
        <div class="cilindro" data-cilindro>
          <h1 class="nascosto" data-titolo></h1>
          <div class="anello" data-anello aria-hidden="true"></div>
        </div>
        <div class="sommario" data-sommario>
          <p class="sommario__testo" data-riga>Seven potters, one studio by the river, and the slow afternoons it takes to centre a ball of clay.</p>
          <p class="sommario__firma" data-riga>Words by Ines Moreau. Photographs by Tomas Leer.</p>
        </div>
        <p class="invito" data-invito>
          <span>Scroll to unroll</span>
          <svg viewBox="0 0 12 18" aria-hidden="true"><path d="M6 1v15M1.5 11.5 6 16l4.5-4.5" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </p>
      </div>
    </section>

    <article class="pezzo">
      <div class="pezzo__testo">
        <p class="pezzo__primo" data-sale>The wheel at the back of the studio is older than anyone who uses it. It hums when it starts, settles into a low note, and from then on the only sound is water and the soft slap of a palm on wet clay.</p>
        <p data-sale>Centring comes first, and it never gets quicker. You lean in with the whole body, not the arms, until the lump stops fighting you and spins without a wobble. Only then does the hole open, and the walls begin to rise.</p>
        <blockquote class="citazione" data-sale>
          <p>The clay tells you when it is ready. You just have to stop talking.</p>
        </blockquote>
        <p data-sale>Every pot here carries a line of words painted around its belly before the first firing: a name, a date, a line from a song. Turn the pot and the sentence comes round to meet you.</p>
      </div>
      <figure class="vaso" aria-hidden="true">
        <svg viewBox="0 0 240 320">
          <path data-traccia d="M88 30h64M92 30c0 22-6 34-22 56-18 25-34 52-34 92 0 62 36 112 84 112s84-50 84-112c0-40-16-67-34-92-16-22-22-34-22-56" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
          <path data-traccia d="M44 150c46 16 106 16 152 0M40 196c50 18 110 18 160 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
          <path data-traccia d="M70 292h100M40 304h160" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
        </svg>
        <figcaption>Drawn in the studio, before the first firing</figcaption>
      </figure>
    </article>

    <section class="forno" data-forno>
      <div class="palco palco--forno">
        <p class="occhiello occhiello--forno">Next, the firing</p>
        <div class="cilindro" data-cilindro>
          <h2 class="nascosto" data-titolo></h2>
          <div class="anello" data-anello aria-hidden="true"></div>
        </div>
        <p class="forno__nota" data-nota>Twelve hours of heat, a night of cooling, and nobody opens the door before morning.</p>
      </div>
    </section>

    <footer class="piede">
      <p class="piede__marchio">Slip</p>
      <p class="piede__testo">Four issues a year, printed on paper you can feel.</p>
      <a class="pillola" href="#"><span class="pillola__fondo" aria-hidden="true"></span><span class="pillola__scritta">Subscribe</span></a>
    </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.

39 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 titolo avvolto sul cilindro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

L’apertura di una rivista inventata sulla ceramica, Slip, su un fondo color carta. Il titolo, «On the wheel», è dipinto intorno a un cilindro come le scritte intorno a un vaso sul tornio: ogni lettera sta sulla curva, girata verso l’esterno, davanti a fasce di argilla, e diventa più scura sui fianchi e dietro, dove si vede al rovescio attraverso l’argilla. In cima alla pagina il cilindro ondeggia piano, come un vaso fermo sul tornio. Scorrendo gira due volte e rallenta; poi si srotola: la prima lettera a sinistra si stacca dal fianco del cilindro e si posa sulla riga, e il cilindro rotola verso destra lungo la riga come un tappeto, lasciando giù una lettera dopo l’altra. Ogni lettera che arriva si schiaccia appena e torna su con un rimbalzo elastico. Quando il titolo è tutto dritto entrano sotto il sommario e la firma. Più giù, dopo il testo dell’articolo con un vaso che si disegna, la pagina diventa scura come un forno e il secondo titolo, «Into the kiln», fa il contrario: si arrotola da destra sul suo cilindro, gira sempre più veloce, si inclina e vola via verso l’alto.

Come funziona

Le lettere e la riga

Lo script divide TITLE in lettere, ognuna in due span: quello fuori lo muove lo scroll, quello dentro il rimbalzo. Misura le lettere a 100 pixel, sceglie la grandezza che fa stare la riga nell’84% della finestra (90% sul telefono, al massimo il 26% dell’altezza) e dà a ogni lettera il suo posto s sulla riga, misurato dal centro.

Il cilindro

Il raggio è RADIUS volte la lunghezza della riga diviso 2π: con 1 il titolo fa esattamente un giro. Avvolta, una lettera sta all’angolo s / R: x = R · sen a, z = R · cos a − R, e rotateY(a) la gira verso fuori. Dietro le lettere, da 24 a 72 fasce strette di argilla fanno la superficie. Il cilindro avvolto sta un po’ più vicino a chi guarda (una parte della prospettiva), così sembra più grande, e TILT lo inclina con rotateX intorno al suo asse.

L’ombra

Il colore di ogni lettera e di ogni fascia si mescola fra il colore in luce e quello in ombra secondo l’angolo: (1 − cos a) / 2, un po’ di più sul fianco destro perché la luce viene da sinistra, e ancora di più dietro. SHADE dice quanto scurire. Le lettere dietro si vedono al rovescio (backface-visibility visibile) e tenui, come attraverso l’argilla. Le fasce stanno in un livello a parte, sotto quello delle lettere, così una lettera non viene mai tagliata o coperta da una fascia; quando lo srotolamento comincia il cilindro è già dritto, e ogni fascia sparisce appena si stacca.

Lo srotolamento

Il palco è sticky alto 100lvh in una sezione alta 380lvh; un tween con ScrollTrigger e scrub porta l’avanzamento da 0 a 1, e Lenis rende lo scroll morbido. Nella prima metà il cilindro gira TURNS volte rallentando; dal 30% all’82% si srotola. Ogni lettera ha il suo tratto (una ogni 1 / 3,4 dello srotolamento, da sinistra) in cui posizione e angolo passano dal cilindro alla riga con power3.inOut. Intanto il cilindro rotola verso destra come un tappeto e gira di quanto rotola, così la lettera che si stacca parte sempre dal suo fianco sinistro.

Il rimbalzo e il contrario

Quando una lettera arriva sulla riga, lo span dentro parte schiacciato (scaleY 0,72, scaleX 1,16) e torna normale con EASE in 1,1 secondi. Il secondo titolo usa lo stesso cilindro al contrario: lo srotolamento va da 1 a 0, quindi si arrotola dalla destra; poi gira sempre più veloce con power2.in, si inclina, sale, rimpicciolisce e sparisce.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TITLE`	script.js	`'On the wheel'`	Il titolo dell’apertura, avvolto sul cilindro.
`OUTRO_TITLE`	script.js	`'Into the kiln'`	Il secondo titolo, quello che si arrotola e se ne va.
`RADIUS`	script.js	`1.15`	La grandezza del cilindro: con 1 il titolo fa esattamente un giro, di più lascia un vuoto dietro.
`TURNS`	script.js	`2`	Quante volte gira il cilindro prima di srotolarsi (con i numeri interi parte col titolo davanti).
`SHADE`	script.js	`0.8`	Quanto si scuriscono le lettere sui fianchi e dietro, da 0 a 1.
`TILT`	script.js	`16`	Quanto si guarda il cilindro dall’alto, in gradi.
`EASE`	script.js	`'elastic.out(1.1, 0.35)'`	Il rimbalzo di ogni lettera quando arriva sulla riga dritta.
`SCRUB`	script.js	`0.6`	I secondi che il cilindro impiega a raggiungere lo scroll.

Provali nel Playground

Quando usarla

Per l’apertura di una rivista, di un articolo lungo, della pagina di un progetto o di un marchio che ha a che fare con qualcosa che gira: ceramica, tessuti, stampa, vinili, lattine, etichette. Funziona con titoli corti, da 6 a 16 lettere: con una frase lunga la riga diventa piccola e il cilindro enorme.

Sul telefono

Le stesse animazioni con le misure adattate: la riga prende il 90% della larghezza, il cilindro avvolto sta più vicino a chi guarda così resta grande nello schermo stretto, e il dito srotola il titolo come la rotella (Lenis lascia lo scroll nativo al tocco).

Con il movimento ridotto

Niente gira e niente si muove: il titolo è già dritto al suo posto, sommario e firma entrano in dissolvenza appena si scorre, e il secondo titolo sparisce in dissolvenza. Lenis non parte.

Trappole

Interpolare l’angolo di una lettera che sta girando da molti giri porta la lettera a fare tutti quei giri da sola. Per questo il giro del cilindro finisce (quasi) prima che le lettere si stacchino, e l’angolo non va mai riportato fra −180 e 180: il salto si vedrebbe a metà strada.
Se il cilindro resta fermo al centro mentre si srotola, la riga gli passa attraverso. Va fatto rotolare lungo la riga e girare di quanto rotola (angolo = spostamento / raggio), così la lettera che si stacca parte dal suo fianco.
L’inclinazione con rotateX gira intorno al centro dello schermo: se il cilindro sta più vicino a chi guarda, scende. Va girata intorno al suo asse, con un translateZ prima e uno uguale e opposto dopo.
Le lettere vanno misurate col loro carattere: si aspetta document.fonts.load del peso usato, altrimenti si misura il carattere di riserva e le lettere si accavallano.
Lettere e fasce nello stesso contesto 3D si tagliano a vicenda dove si incrociano, e una fascia più vicina copre le lettere già posate. Le fasce vanno in un livello fratello prima di quello delle lettere: ognuno ordina in 3D i suoi pezzi, ma le lettere stanno sempre sopra.

Librerie

GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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