Il calendario che si avvicina

Calendari, TransizioniGSAPMediaPeso compresso: Demo 8,1 KBGSAP 28 KBGratisScarica lo zip

L’anno intero in dodici mesi piccoli: scegliendone uno la vista ci entra dentro, il mese piccolo cresce fino a diventare quello grande mentre il resto dell’anno si allarga oltre i bordi e svanisce, come una telecamera che si avvicina.

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 zooming calendar</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the calendar: the whole year in twelve small months; choosing one, the view zooms into it until it is the big
         month, and the way back zooms out to the year. The months are drawn by the script -->
    <div class="zoomcal" data-cal>
      <div class="zoomcal__head">
        <button class="zoomcal__back" type="button" data-back hidden><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg><span data-back-label></span></button>
        <h1 class="zoomcal__title" data-title></h1>
        <div class="zoomcal__arrows">
          <button class="zoomcal__arrow" type="button" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg></button>
          <button class="zoomcal__arrow" type="button" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg></button>
        </div>
      </div>
      <div class="zoomcal__views" data-views>
        <div class="year" data-year></div>
        <div class="month" data-month hidden></div>
      </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.

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 «Il calendario che si avvicina» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco l’anno intero in dodici mesi piccoli, quattro per riga (tre sul telefono), con l’anno in alto in mezzo e due frecce a destra. Il mese di oggi ha il nome arancione e oggi è un disco arancione; il giorno scelto è un disco nero; sabati e domeniche sono grigi. Premendo un mese la vista ci entra dentro: il mese piccolo cresce fino a diventare quello grande, i suoi numeri diventano i numeri grandi senza sdoppiarsi, e il resto dell’anno si allarga oltre i bordi e svanisce, come una telecamera che si avvicina. In alto il nome del mese prende il posto dell’anno e a sinistra compare un pulsante con l’anno, per tornare: il mese grande rimpicciolisce fino al suo posto fra gli altri mentre l’anno ritorna intorno. Nel mese grande oggi ha il numero arancione, e premere un giorno lo sceglie con un disco nero, che si vede anche nel mese piccolo. Le frecce cambiano anno nella vista dell’anno, con i mesi che escono da una parte ed entrano dall’altra una colonna dopo l’altra, e cambiano mese nella vista del mese, con i giorni che entrano una colonna dopo l’altra dal lato della freccia. Sul telefono uno scorrimento del dito di lato fa come le frecce. All’apertura i mesi arrivano in un’onda dall’angolo in alto a sinistra.

Come funziona

I mesi

Lo script disegna i dodici mesi piccoli e, quando serve, quello grande, sempre di sei settimane: così il mese grande ha la forma del suo piccolo. La grandezza dei numeri è una frazione della cella (--num: 0,36 sul computer, 0,42 sul telefono) presa dalla larghezza del mese con le unità dei container (cqi): piccoli o grandi, i numeri riempiono la stessa parte della loro cella.

La telecamera

Prima dello zoom si misurano, a riposo, i giorni del mese piccolo e quelli del mese grande. Il rapporto fra le due larghezze dice quanto ingrandire: l’anno, con l’origine in alto a sinistra, va a quella scala, spostato in modo che i giorni del mese piccolo cadano esattamente su quelli del grande; i giorni del grande partono dalla scala inversa, esattamente sopra quelli del piccolo. I due movimenti hanno la stessa durata (ZOOM) e la stessa curva (EASE), così restano uno sopra l’altro in ogni fotogramma.

Le dissolvenze

Intanto l’anno svanisce nella prima parte dello zoom (FADE) con power2.in e il mese grande compare con power2.out; i nomi dei giorni della settimana arrivano per ultimi. Al ritorno succede il contrario. Mentre l’anno si muove, il contenitore ne sfuma i bordi per 16 pixel con una maschera, invece di tagliarli netti.

Anni e mesi

Cambiando anno, una copia dell’anno vecchio resta sopra il nuovo il tempo di andarsene: le sue colonne escono di 20 pixel e svaniscono, quelle nuove entrano da 28 pixel dall’altra parte, STAGGER secondi una dopo l’altra. Cambiando mese, i giorni vecchi escono di lato e quelli nuovi entrano colonna per colonna; i nomi dei giorni restano fermi.

La tastiera

Un solo mese piccolo prende il tasto Tab: le frecce si muovono fra i mesi, Pagina su e Pagina giù cambiano anno, Invio apre. Nel mese grande un solo giorno prende il Tab: le frecce si muovono fra i giorni, Home e End vanno all’inizio e alla fine della settimana, Pagina su e Pagina giù cambiano mese, Invio sceglie ed Esc torna all’anno. Il focus segue lo zoom solo quando si usa la tastiera: dopo un tocco Safari su iPhone ci disegnerebbe il bordo del focus.

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.
`ZOOM`	script.js	`0.8`	I secondi dello zoom, dentro e fuori.
`EASE`	script.js	`'expo.inOut'`	La curva dello zoom.
`FADE`	script.js	`0.6`	La parte dello zoom in cui l’anno svanisce (e ritorna).
`STAGGER`	script.js	`0.05`	I secondi fra una colonna di mesi e la successiva quando cambia l’anno.

Provali nel Playground

Quando usarla

Per un’agenda, un diario, la pagina degli eventi di una stagione o una prenotazione a lungo termine: dove serve vedere l’anno intero e poi entrare in un mese, senza perdere di vista dove ci si trova.

Sul telefono

Sotto i 720 pixel l’anno sta su tre colonne e i numeri riempiono una parte un po’ più grande della loro cella (--num 0,42), per restare leggibili. I tocchi fanno come i clic, e uno scorrimento del dito di lato cambia anno o mese.

Con il movimento ridotto

Niente zoom: l’anno e il mese si scambiano in dissolvenza, gli anni e i mesi cambiano di colpo, il disco del giorno scelto compare senza scatto e all’apertura non arriva niente.

Trappole

Lo zoom va misurato a riposo: l’anno senza transform e il mese grande al suo posto. Al ritorno si toglie per un attimo la scala all’anno, che in quel momento è invisibile, si misura e la si rimette.
Con numeri di grandezza diversa nei due mesi, a metà dello zoom si vedrebbero due numeri sovrapposti di misure diverse: per questo la grandezza è la stessa frazione della cella in tutti e due.
La copia dell’anno che se ne va è inert e nascosta agli screen reader, e perde il segno per l’anteprima automatica: altrimenti per mezzo secondo ci sarebbero due anni da usare.
Il pulsante per tornare ha display: inline-flex, che vince sull’attributo hidden: serve una regola [hidden] con display: none, o il pulsante resta sempre lì.

Librerie

GSAP 3.15.0, Geist (font variabile) 5.3.0.

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

Collaudo

Provata il 3 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

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.