I mesi sul tamburo

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

Scorri dentro l’anteprima

Il programma di un festival, un mese alla volta: i dodici mesi stanno su un tamburo che gira in 3D mentre scorri. Il mese nella finestra è largo e pieno, gli altri si piegano sulla curva e diventano stretti, sottili e chiari; accanto, una riga sola dice cosa succede quel mese. Stile minimal.

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 year on a drum</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the programme of a made-up music festival, Ondo, a month at a time. The twelve months sit on a drum that turns
       in 3D as you scroll: the month in the window is wide and heavy, the others fold away on the curve, narrower and
       lighter. Beside the window one line says what happens that month -->
  <main>
    <section class="anno" data-anno>
      <div class="palco">
        <header class="testa">
          <p class="marchio">Ondo</p>
          <p class="piccolo">Festival programme 2027</p>
        </header>

        <!-- the window: two hairlines across the page, the month in the middle reads between them -->
        <div class="finestra" data-finestra aria-hidden="true">
          <i class="filo filo--su" data-filo></i>
          <i class="filo filo--giu" data-filo></i>
          <i class="indice" data-indice></i>
        </div>

        <div class="tamburo" data-tamburo>
          <ul class="mesi" aria-label="Months">
            <li class="mese" data-mese>January</li>
            <li class="mese" data-mese>February</li>
            <li class="mese" data-mese>March</li>
            <li class="mese" data-mese>April</li>
            <li class="mese" data-mese>May</li>
            <li class="mese" data-mese>June</li>
            <li class="mese" data-mese>July</li>
            <li class="mese" data-mese>August</li>
            <li class="mese" data-mese>September</li>
            <li class="mese" data-mese>October</li>
            <li class="mese" data-mese>November</li>
            <li class="mese" data-mese>December</li>
          </ul>
        </div>

        <!-- one line per month, in the same order; only the one of the month in the window shows -->
        <div class="programma" data-programma aria-live="polite">
          <p class="voce" data-voce><span class="giorni">17–18</span> Night listening in the old glasshouse</p>
          <p class="voce" data-voce><span class="giorni">7</span> A piano on the frozen lake, no lights</p>
          <p class="voce" data-voce><span class="giorni">14–16</span> Opening weekend on the river</p>
          <p class="voce" data-voce><span class="giorni">25</span> Choirs from the four valleys</p>
          <p class="voce" data-voce><span class="giorni">9–10</span> Field recordings at dawn</p>
          <p class="voce" data-voce><span class="giorni">21</span> The longest day, twelve hours of drums</p>
          <p class="voce" data-voce><span class="giorni">4–6</span> Main stage in the open air</p>
          <p class="voce" data-voce><span class="giorni">15</span> Boats, strings and fireworks</p>
          <p class="voce" data-voce><span class="giorni">12–13</span> An electronic weekend in the quarry</p>
          <p class="voce" data-voce><span class="giorni">18</span> Brass bands through the old town</p>
          <p class="voce" data-voce><span class="giorni">8</span> A quiet hour in the library</p>
          <p class="voce" data-voce><span class="giorni">20</span> Closing night, the whole year in one set</p>
        </div>
      </div>
    </section>

    <section class="coda">
      <p class="coda__titolo">Twelve months<br>on the river.</p>
      <p class="piccolo">One ticket for the whole year.</p>
    </section>
  </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="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.

55 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 «I mesi sul tamburo» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Il programma dell’anno di un festival di musica inventato, Ondo, su un bianco caldo con l’inchiostro nero e un solo vermiglio. All’arrivo due righe sottilissime si disegnano da un lato all’altro della pagina e fanno da finestra, e il tamburo dei mesi sale da sotto finché gennaio si posa fra le due righe. Poi lo schermo resta fermo e, scorrendo, il tamburo gira: il mese nella finestra è grande, largo e nero, quelli sopra e sotto si piegano sulla curva come su un cilindro vero, e più salgono o scendono più si stringono, perdono peso e schiariscono, fino a sparire sul bordo. Il tamburo non è incollato allo scorrimento: lo tira una molla, quindi ha un poco di peso, insegue e si posa sul mese andando oltre di un pelo. Quando smetti di scorrere, si ferma sul mese più vicino. Accanto alla finestra una riga sola dice il programma del mese, con i giorni in vermiglio: quando il mese cambia, le lettere della riga vecchia escono una dopo l’altra nel verso in cui gira il tamburo e quelle nuove entrano dall’altra parte. A ogni mese che passa al centro le due righe della finestra sentono il colpo e il segno vermiglio a sinistra scatta. Tutto segue lo scorrimento, avanti e indietro.

Come funziona

Il tamburo da un numero solo

Tutto il tamburo si disegna da un numero, pos: 2 è marzo, 2,5 è a metà fra marzo e aprile. Per ogni mese l’angolo è (pos − i) × STEP gradi; il mese prende translateZ(−raggio) rotateX(angolo) translateZ(raggio), così gira sulla superficie di un cilindro dietro la pagina. Oltre i 90 gradi è sul retro e si nasconde.

Il raggio giusto

Il mese più lungo si misura su una copia invisibile già larga e grassa come nella finestra, e il corpo del carattere è quello che lo fa stare nella sua colonna. Un mese è alto una riga; il raggio è riga ÷ STEP in radianti, cioè quello che mette il mese dopo esattamente una riga più in là lungo la curva.

Larghezza e peso dalla curva

Anybody è un carattere variabile con due assi: larghezza (da 50 a 150) e peso (da 100 a 900). Per ogni mese il seno dell’angolo dice quanto è salito sul cilindro, da 0 nella finestra a 1 sul bordo, e con lui si passa da WIDE a NARROW, da BOLD a THIN e da opaco a FAINT, scritti in font-variation-settings a ogni fotogramma.

La molla e lo scatto

Una timeline con scrub porta un numero da 0 all’ultimo mese mentre scorri. Il tamburo non lo prende così com’è: in gsap.ticker una molla (rigidità SPRING, smorzamento DAMPING sotto 1) lo insegue a piccoli passi, e così va oltre il mese di un pelo e torna. Lo snap di ScrollTrigger, con inertia e directional spenti, posa lo scorrimento sul mese più vicino.

La riga del mese

Ogni riga del programma è divisa in parole che non si spezzano e lettere che si muovono, dentro una finestra con overflow hidden. Quando il mese al centro cambia, le lettere vecchie escono con yPercent nel verso del giro, una dopo l’altra, e quelle nuove entrano dall’altro lato con un back.out che le fa andare oltre di un pixel. Il colpo sulle righe della finestra è un elastic.out forte quanto la velocità del tamburo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STEP`	script.js	`24`	I gradi fra un mese e l’altro sul tamburo: meno gradi, più mesi in vista e un tamburo più grande.
`WIDE`	script.js	`128`	La larghezza del mese nella finestra (Anybody va da 50 a 150).
`NARROW`	script.js	`56`	La larghezza dei mesi sul bordo del tamburo.
`BOLD`	script.js	`780`	Il peso del mese nella finestra.
`THIN`	script.js	`120`	Il peso sul bordo del tamburo.
`FAINT`	script.js	`0.08`	Quanto si vede ancora un mese sul bordo, da 0 a 1.
`SPRING`	script.js	`160`	Quanto forte la molla tira il tamburo verso lo scorrimento: più alto, più svelto.
`DAMPING`	script.js	`0.68`	Lo smorzamento della molla: sotto 1 il tamburo va oltre il mese di un pelo e torna, a 1 si posa senza passarlo.
`SNAP`	script.js	`true`	Se, quando smetti di scorrere, il tamburo si ferma sul mese più vicino.

Provali nel Playground

Quando usarla

Per il programma di un festival, di una stagione teatrale, di un museo o di un locale: dodici mesi, o dodici date, raccontati uno alla volta, con una riga per ciascuno. Va bene anche per le tappe di un tour o per i corsi di una scuola, con parole corte al posto dei mesi.

Sul telefono

Uguale, con il tamburo largo quanto lo schermo, il carattere misurato perché settembre ci stia intero e la riga del programma subito sotto il tamburo invece che accanto.

Con il movimento ridotto

Il tamburo non gira: mostra già fermo il mese dello scorrimento, e quando il mese cambia il tamburo e la riga del programma si danno il cambio con una dissolvenza. Niente molla, niente scatto, niente colpi sulla finestra.

Trappole

Lo snap di ScrollTrigger con snapTo a passi tiene conto della velocità e del verso: dopo un salto di scorrimento (un link, il pilota automatico, chi trascina la barra) correva fino all’ultimo mese o tornava al primo. Con inertia: false e directional: false si posa sul mese più vicino a dove ti sei fermato.
Le lettere nuove della riga partono un attimo dopo che le vecchie hanno cominciato a uscire: partendo insieme, con un’uscita in power2.in che all’inizio è lenta, per un istante le due righe stavano una sull’altra.

Librerie

GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, Anybody (font variabile) 5.3.0.

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

Collaudo

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