Il menu col bruco
Menu, Hover, Transizioni
NuovaGratis
Tutti i componenti
Il calendario delle prenotazioni
Due mesi affiancati per scegliere l’arrivo e la partenza, come nella pagina delle prenotazioni di una casa vacanze: i due giorni scattano in un disco nero, il soggiorno si riempie un giorno dopo l’altro come un’onda e sotto le notti e il totale contano fino ai loro numeri.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The booking calendar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/figtree@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the picker: an arrival and a departure. The stay fills up day after day like a wave, the booked nights are
struck through, and the nights and the total count up to their new numbers. The months are drawn by the script -->
<div class="picker" data-picker>
<div class="picker__head">
<button class="picker__nav" type="button" aria-label="Previous month" data-prev><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6 8.5 12l6 6"/></svg></button>
<button class="picker__nav" type="button" aria-label="Next month" data-next><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6l6 6-6 6"/></svg></button>
</div>
<div class="picker__months" data-months></div>
<div class="picker__foot">
<p class="picker__sum" aria-hidden="true" data-sum></p>
<button class="picker__clear" type="button" data-clear>Clear dates</button>
</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.
16 valori da cambiare
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 delle prenotazioni» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una scheda con due mesi affiancati (uno solo sul telefono), le frecce in alto e una riga in fondo. Ogni giorno ha il suo numero e sotto il prezzo di una notte; i giorni passati sono grigi e le notti già prenotate sono barrate, e nessuno dei due si può scegliere. Il primo clic sceglie l’arrivo: il giorno scatta in un disco nero con un rimbalzo. Poi, sotto il puntatore, una fascia chiara mostra il soggiorno che ne verrebbe fuori; il secondo clic sceglie la partenza, il suo disco scatta e il soggiorno si riempie dall’arrivo alla partenza un giorno dopo l’altro, come un’onda, in una fascia color sabbia arrotondata dove una settimana o il mese cominciano e finiscono. Un soggiorno non può scavalcare una notte prenotata: un clic che lo farebbe sceglie un nuovo arrivo. Sotto ci sono le date, e le notti e il totale in euro che contano fino ai loro nuovi numeri; Clear dates ripiega la fascia dalla partenza all’arrivo e fa sparire i dischi. Le frecce cambiano mese, e la fila dei mesi scorre di un mese come un carosello; indietro non si va oltre il mese di oggi. All’apertura un soggiorno di quattro notti è già scelto e si riempie davanti a te.
Come funziona
I mesi
Lo script disegna ogni mese: il titolo, le iniziali dei giorni da WEEK_START in poi e sei settimane di pulsanti, così tutti i mesi sono alti uguali. Ogni giorno ha tre strati: la fascia del soggiorno, il disco e il numero col prezzo. Le notti prenotate (circa una su sette) e i prezzi sono inventati da un numero ricavato dalla data, quindi sono sempre gli stessi; il prezzo parte da PRICE, uno per i giorni feriali e uno per il venerdì e il sabato, più 0, 10 o 20 euro.
La fascia
Dentro il soggiorno la fascia di un giorno è larga quanto la sua cella; quella dell’arrivo parte dal suo centro e quella della partenza finisce al suo centro, sotto i dischi. È arrotondata nella prima e nell’ultima colonna e nel primo e nell’ultimo giorno del mese, così ogni settimana del soggiorno si legge come una pillola.
L’onda e i numeri
L’onda è la fascia di ogni giorno che cresce dal suo lato sinistro (scaleX da 0 a 1) in WAVE[0] secondi, WAVE[1] secondi dopo quella prima. I dischi scattano da 0,4 a 1 con back.out(POP). Le notti e il totale sono due numeri che GSAP porta ai loro valori nuovi in COUNT secondi, riscrivendoli a ogni fotogramma.
Il carosello
Cambiando mese, il mese che entra si aggiunge in fondo alla fila (in testa, tornando indietro), la finestra resta larga com’era e la fila scorre di un mese in SLIDE secondi con power3.inOut. Alla fine il mese uscito si toglie e la fila torna a zero: non si vede niente, perché tutto si è spostato esattamente di un mese.
Tastiera, mouse e dito
Un solo giorno della griglia prende il tasto 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. Con la tastiera la fascia chiara segue il focus, col mouse il puntatore; con un dito non c’è, e si tocca l’arrivo e poi la partenza.
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. |
PRICE | script.js | [120, 150] | Il prezzo di una notte, in euro: nei giorni feriali, e il venerdì e il sabato. |
WAVE | script.js | [0.35, 0.018] | L’onda del soggiorno: i secondi di ogni giorno, e il tempo fra un giorno e il successivo. |
POP | script.js | 2.6 | Il rimbalzo di un giorno scelto. |
SLIDE | script.js | 0.55 | I secondi in cui la fila dei mesi scorre di un mese. |
COUNT | script.js | 0.7 | I secondi in cui le notti e il totale arrivano ai loro numeri nuovi. |
Quando usarla
Per la pagina delle prenotazioni di una casa vacanze, di un agriturismo, di un albergo o di un noleggio: ovunque si scelgano due date e contino le notti. I prezzi e le notti prenotate vanno presi dal tuo sistema al posto di quelli inventati.
Sul telefono
Sotto i 760 pixel resta un mese solo e le celle si stringono per stare nella larghezza dello schermo. I tocchi fanno come i clic; la fascia chiara sotto il puntatore non c’è, ma si sceglie allo stesso modo: un tocco per l’arrivo, uno per la partenza.
Con il movimento ridotto
Niente onda, niente rimbalzi e niente carosello: la fascia compare in dissolvenza e i dischi di colpo, i mesi cambiano di colpo, le notti e il totale vanno subito ai loro numeri e all’apertura la scheda è già al suo posto.
Trappole
- Un tween su un elenco vuoto fa scrivere a GSAP «target not found» nella console: per questo l’onda, i dischi e la piegatura di Clear dates controllano prima che ci sia qualcosa da muovere.
- Il carosello blocca la larghezza della finestra prima di aggiungere il mese che entra: senza, per un attimo la finestra si allargherebbe e la scheda salterebbe.
- Non basta che le notti prenotate non si possano scegliere: un soggiorno che le scavalca va rifiutato, per questo valid() controlla ogni notte fra l’arrivo e la partenza.
- Ogni ridisegno rimette la fascia intera (scaleX 1): se l’onda o la piegatura vengono interrotte a metà, il soggiorno non resta mai mezzo vuoto.
Librerie
GSAP 3.15.0, Figtree (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,4 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.
