Il calendario che si spiega

Calendari, Transizioni, Fisica, TestoGSAPImpegnativaPeso compresso: Demo 13 KBGSAP 28 KBGratisScarica lo zip

Un selettore della data nello stile minimal, alto una settimana sola: il mese intero si spiega da quella settimana come un foglio piegato a fisarmonica, una riga dopo l’altra con una piega sottile che si vede mentre gira, e scelto il giorno si ripiega nella sua settimana; il disco blu del giorno scelto viaggia fra i numeri allungandosi come una goccia.

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 unfolding calendar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the picker: a strip with the week of the chosen day. The arrow on the right (or dragging the strip down) unfolds
         the whole month out of that week, row after row like a folded sheet; choosing a day folds it back into its week.
         The chosen day sits on a disc that travels between the days. The weeks and the days are drawn by the script -->
    <div class="wk" data-picker data-autoclic>
      <div class="wk__head">
        <h2 class="wk__title" aria-live="polite"><span data-title></span></h2>
        <div class="wk__ctrl">
          <button class="wk__nav" type="button" aria-label="Previous week" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg></button>
          <button class="wk__nav" type="button" aria-label="Next week" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg></button>
          <button class="wk__toggle" type="button" aria-expanded="false" aria-controls="wk-days" aria-label="Show the whole month" data-toggle><svg viewBox="0 0 24 24" aria-hidden="true" data-chevron><path d="M6 9.5l6 6 6-6"/></svg></button>
        </div>
      </div>
      <div class="wk__week" aria-hidden="true" data-week></div>
      <div class="wk__body" id="wk-days" data-body>
        <span class="wk__disc" aria-hidden="true" data-disc></span>
        <div class="wk__rows" data-rows></div>
      </div>
      <span class="wk__grab" aria-hidden="true" data-grab><span></span></span>
      <div class="wk__foot">
        <p class="wk__day" aria-hidden="true" data-day></p>
        <p class="wk__date" aria-hidden="true"><span class="wk__full" data-full></span><span class="wk__rel" data-rel></span></p>
      </div>
      <p class="sr" role="status" aria-live="polite" data-said></p>
    </div>
  </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.

17 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 calendario che si spiega» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco, in alto il mese, le due frecce e un tasto tondo con la freccia in giù; sotto i nomi dei giorni e una sola riga: la settimana del giorno scelto, con il suo numero bianco su un disco blu. Più sotto una lineetta da prendere col dito e, dopo una riga sottile, il giorno della settimana scritto grande (Tuesday), la data intera e quanto manca (In 2 days). Il tasto tondo, o trascinare in giù la settimana, spiega il mese: le settimane sopra e sotto girano sullo spigolo che le unisce a quella scelta, prima le vicine e poi le lontane, come un foglio piegato a fisarmonica che si apre, con la piega che si vede come una riga sottile e un filo d’ombra; arrivate in piano vanno un paio di gradi oltre e si posano. Scegliendo un giorno del mese il disco ci va sopra con una molla, allungato nella direzione in cui corre, e i numeri che attraversa diventano bianchi mentre ci passa; poi il mese si ripiega nella nuova settimana. Col mese chiuso le frecce (e una strisciata di lato) girano la striscia alla settimana dopo o prima, un giorno dopo l’altro come un tabellone a palette; col mese aperto cambiano mese. Il giorno scritto sotto cambia lettera per lettera: le vecchie si stringono sull’asse della larghezza e spariscono, le nuove si allargano un poco oltre la loro misura e prendono peso. I giorni passati sono chiari e non si scelgono, oggi ha il numero blu.

Come funziona

Le settimane di un mese

Lo script disegna le settimane del mese (da quattro a sei) e ognuna è due strati: la riga, alta quanto la parte spiegata, e la sua faccia con i sette giorni, sempre alta una settimana. La faccia delle settimane sopra quella scelta sta attaccata al fondo della riga e gira sul suo spigolo di sotto; quella delle settimane sotto sta in cima e gira sullo spigolo di sopra. Così ogni settimana si piega sempre verso quella del giorno scelto.

Un numero solo per la piega

Tutta la piega è un numero su una molla, da 0 (chiuso) a 1 (aperto), con FOLD e FOLD_DAMPING. Ogni settimana, d righe lontana da quella scelta, si spiega nel suo tratto di quel numero, più tardi quanto più è lontana (STAGGER). Da lì vengono l’angolo (rotateX con la prospettiva) e l’altezza della riga, che è l’altezza della faccia per il coseno dell’angolo: è quanto si vede davvero di una faccia girata, quindi la pagina sotto si sposta proprio come si apre il foglio. Oltre 1, quando la molla sfora, le settimane già in piano girano di qualche grado dall’altra parte e tornano.

La mano sulla piega

Trascinando in su o in giù la settimana (o la lineetta) il numero della piega segue la mano, con un poco di gioco oltre i due capi; lasciando, torna alla molla con la velocità della mano, così un colpo secco la apre o la chiude anche a metà strada. Una strisciata di lato sulla striscia chiusa gira la settimana. Un trascinamento non vale come clic su un giorno.

Il disco che corre

Il disco blu sta sotto i numeri ed è mosso da una sua molla (DISC) verso il centro del giorno scelto, misurato a ogni fotogramma dalle posizioni vere delle righe, così resta attaccato al suo giorno anche mentre il mese si apre e si chiude. Si allunga nella direzione della velocità (STRETCH) e si stringe di traverso, come una goccia; i numeri che ha sotto diventano bianchi e prendono peso, anche quelli che attraversa per strada.

La settimana che gira

Col mese chiuso, cambiare settimana fa una copia della striscia vecchia sopra la nuova: GSAP fa girare via i giorni vecchi in avanti e girare dentro quelli nuovi, uno dopo l’altro (TURN), con un piccolo rimbalzo; il disco sente il colpo e si abbassa un attimo. Se la nuova settimana è in un altro mese, sotto si ridisegna il mese senza che si veda.

Il giorno scritto grande

Il giorno della settimana è in Roboto Flex, che ha la larghezza da 25 a 151 e la misura ottica fino a 144. Ogni lettera è uno span con due variabili, --w per la larghezza e --g per il peso: le vecchie vanno a 25 e spariscono, le nuove arrivano da 25 fino a un poco oltre 100 e tornano, una dopo l’altra, prendendo peso. Anche il mese in alto si stringe e si riallarga quando cambia.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WEEK_START`	script.js	`1`	Il primo giorno della settimana: 1 il lunedì, 0 la domenica.
`FOLD`	script.js	`2.2`	Quanto in fretta il mese si spiega e si ripiega, in hertz.
`FOLD_DAMPING`	script.js	`0.66`	Lo smorzamento della piega: più basso, le settimane vanno più oltre il piano prima di posarsi.
`STAGGER`	script.js	`0.45`	Quanto ogni settimana si spiega dopo quella prima di lei (0 = tutte insieme).
`DISC`	script.js	`4.4`	Quanto in fretta il disco corre al giorno nuovo, in hertz.
`STRETCH`	script.js	`0.3`	Quanto si allunga il disco mentre corre (0 = resta tondo).
`TURN`	script.js	`[0.5, 0.034]`	La settimana che gira: i secondi di ogni giorno, e il tempo fra un giorno e il successivo.
`AUTO_FOLD`	script.js	`true`	Scegliere un giorno nel mese aperto lo ripiega nella settimana di quel giorno.

Provali nel Playground

Quando usarla

Dove si sceglie un giorno solo e lo spazio è poco: la prenotazione di un tavolo o di una lezione, il giorno di consegna in un carrello, l’agenda di un’app, la data di uno spettacolo. A riposo occupa una riga e il mese si apre solo quando serve.

Sul telefono

Sotto i 480 pixel le celle si stringono per stare nella larghezza dello schermo e il giorno scritto si fa un poco più piccolo. Col dito si trascina in giù la settimana per aprire il mese e in su per chiuderlo, con la stessa molla; una strisciata di lato cambia settimana, come le frecce.

Con il movimento ridotto

Niente pieghe, niente molle e niente giri: il mese compare e sparisce in dissolvenza, il disco si posa subito sul giorno con una dissolvenza, la settimana nuova e il mese nuovo si sostituiscono in dissolvenza, e il giorno scritto cambia sfumando.

Trappole

La freccia del tasto tondo, girata dallo script con la piega, ruotava intorno al suo angolo in alto a sinistra e usciva dal cerchio: all’svg serve transform-origin al centro.
Il numero passava al bianco con una transizione di colore: quando il disco se ne andava restava per un attimo quasi bianco su bianco. Ora diventa bianco solo quando il disco gli è sopra, misurato a ogni fotogramma, e il colore cambia quasi di colpo.
La larghezza del mese in alto non cambiava: la variabile --tw va animata sul titolo, che ha il font-variation-settings, non sullo span dentro, che eredita il valore già calcolato.
Nel giro dell’anteprima, a fine mese, non c’era una settimana dopo nello stesso mese e il giro saltava metà degli stati: ora la regia sceglie da sola un giorno lontano e se girare alla settimana dopo o a quella prima, e il giro finisce com’è cominciato.
Con il movimento ridotto le due parole del giorno sfumavano una sopra l’altra e si leggeva un pasticcio: ora la vecchia sparisce prima che arrivi la nuova.
La regia dell’anteprima sta in una timeline di GSAP: così il video registra il giro intero, e una mano vera la ferma subito.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile, assi wght, wdth e opsz) 5.3.0.

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

Collaudo

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