Il meteo della settimana

Meteo, SVG, TransizioniGSAPMediaPeso compresso: Demo 9,1 KBGSAP 28 KBGratisScarica lo zip

Il meteo di una settimana in montagna: scegliendo un giorno il cielo della grande icona si ricompone (il sole scivola dietro le nuvole, le nuvole si scuriscono, comincia la pioggia o la neve, lampeggia il fulmine), la temperatura rotola in su se il giorno è più caldo e in giù se è più freddo, la scheda prende i colori del cielo e la curva delle temperature si muove come un'onda.

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 week's weather</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/quicksand@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the week's weather: choosing a day, the sky of the big icon rearranges itself (the sun slides behind the
         clouds, the rain starts), the temperature rolls up or down, the card takes the colour of the sky and the
         curve of the day's temperatures moves into its new shape -->
    <section class="weather" aria-labelledby="weather-place" data-weather data-autoclic>
      <header class="weather__head">
        <h2 class="weather__place" id="weather-place" data-place></h2>
        <p class="weather__when"><span class="roll" data-day></span></p>
      </header>
      <div class="now">
        <div class="now__icon" data-icon></div>
        <div class="now__main">
          <p class="now__temp"><span class="roll" data-temp></span><span class="now__deg">°</span></p>
          <p class="now__sky"><span class="roll" data-sky></span></p>
        </div>
        <dl class="now__stats">
          <div><dt data-wet-name>Rain</dt><dd data-wet></dd></div>
          <div><dt>Wind</dt><dd data-wind></dd></div>
        </dl>
      </div>
      <div class="chart" tabindex="0" role="slider" aria-label="Temperature through the day" data-chart>
        <svg class="chart__svg" aria-hidden="true" data-chart-svg>
          <defs>
            <linearGradient id="chart-area" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" style="stop-color: var(--line); stop-opacity: 0.34"/>
              <stop offset="1" style="stop-color: var(--line); stop-opacity: 0"/>
            </linearGradient>
          </defs>
          <path class="chart__area" fill="url(#chart-area)" data-area/>
          <line class="chart__guide" data-guide/>
          <path class="chart__line" data-line/>
        </svg>
        <span class="chart__tip" aria-hidden="true" data-tip></span>
        <div class="chart__hours" aria-hidden="true" data-hours></div>
      </div>
      <div class="days" role="radiogroup" aria-label="Day" data-days>
        <span class="days__pill" aria-hidden="true" data-pill></span>
      </div>
      <p class="sr" aria-live="polite" data-live></p>
    </section>
  </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.

118 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 meteo della settimana» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una scheda color cielo: Madonna di Campiglio e il giorno, una grande icona, la temperatura più alta del giorno con sotto il cielo (Sunny), la probabilità di pioggia e il vento, la curva delle temperature dalle 6 del mattino alle 8 di sera e in fondo i sette giorni, ognuno con la sua piccola icona, la massima e la minima. Scegliendo un altro giorno i pezzi della grande icona si spostano: il sole si fa piccolo e sparisce dietro le nuvole o ne esce con un rimbalzo, le nuvole arrivano di lato e si scuriscono, le gocce o i fiocchi cominciano a cadere, nei temporali il fulmine lampeggia due volte e poi aspetta; i raggi del sole girano piano. La temperatura rotola verso l'alto se il giorno è più caldo e verso il basso se è più freddo, il nome del giorno e del cielo rotolano, pioggia e vento contano fino alle cifre nuove, la scheda cambia colore e la curva prende la forma nuova un punto dopo l'altro, come un'onda dal mattino alla sera. Passando col puntatore o col dito sulla curva compare l'ora con la sua temperatura (2 pm · 13°). La pastiglia bianca scivola sotto il giorno scelto con un rimbalzo e la sua icona fa un saltello.

Come funziona

Un cielo fatto di pezzi

Ogni icona, grande o piccola, è lo stesso SVG: un sole coi raggi, una nuvola dietro, una nuvola davanti con la sua ombra, un fulmine, la pioggia e la neve. Ogni pezzo sta in un gruppo messo al suo posto una volta sola e si muove dentro di lui: per ogni cielo una tabella dice dove sta ogni pezzo (x, y, scala, opacità) e di che colore sono le nuvole, e GSAP li porta lì in CHANGE secondi.

Pioggia, neve e fulmine

Nella grande icona ogni goccia cade in un giro suo che si ripete, cominciato in un punto a caso (progress con Math.random()), così non cadono mai tutte insieme; i fiocchi scendono più piano dondolando e girando. Il fulmine è una timeline che si ripete: due lampi veloci e una pausa.

Le cifre che rotolano

Il giorno, il cielo e la temperatura sono parole che rotolano: la vecchia esce nel verso del cambio, il testo cambia e la nuova entra dall'altra parte con back.out. La temperatura sale se il giorno è più caldo e scende se è più freddo; pioggia e vento contano con un tween su un numero.

La curva come un'onda

La curva passa per otto temperature, una ogni due ore, unite da curve di Bézier calcolate col metodo di Catmull-Rom; la scala è quella di tutta la settimana, così un giorno freddo sta più in basso. Cambiando giorno ogni punto va alla temperatura nuova poco dopo il precedente, e una timeline ridisegna la linea e l'area a ogni fotogramma.

L'ora sotto il puntatore, i tasti e l'anteprima

Il puntatore o il dito sulla curva prendono l'ora più vicina: una riga sottile scende dalla curva e l'etichetta la segue con quickTo. Coi tasti la curva è uno slider (frecce, Home e Fine) e i giorni sono un gruppo di scelte. Il colore della scheda sta in tre variabili CSS che GSAP porta ai colori del cielo nuovo. Un clic da script (l'anteprima della libreria) va al giorno dopo e ogni terza volta fa correre un puntatore finto lungo la curva.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`PLACE`	script.js	`'Madonna di Campiglio'`	Il posto.
`DAYS`	script.js	`[['Friday', 'sunny', [2, 5, 9, 12, 14, 13, 10, 6], 0, 8], …]`	La settimana: il giorno, il suo cielo (sunny, partly, cloudy, rain, storm, snow), la temperatura ogni due ore dalle 6 del mattino, la probabilità di pioggia o neve e il vento.
`CHANGE`	script.js	`0.8`	I secondi che il cielo, i colori e la curva impiegano a cambiare.
`SUN_TURN`	script.js	`40`	I secondi che i raggi del sole impiegano a fare un giro.
`DROPS`	script.js	`8`	Quante gocce di pioggia, o quanti fiocchi di neve, cadono dalla grande icona.
`SKIES`	script.js	`{ sunny: ['Sunny', '#fff6df', '#ffe4ad', '#f2a516'], … }`	I cieli: il nome, i colori della scheda in alto e in basso, il colore della curva.

Provali nel Playground

Quando usarla

Per il sito di un rifugio, di un albergo o di un agriturismo, l'app di una località, una pagina di eventi all'aperto, una dashboard, qualunque scheda che cambia stato con un'icona disegnata.

Sul telefono

La scheda è larga al massimo 400 pixel e ci sta tutta; il dito appoggiato sulla curva mostra l'ora e la segue di lato, e un momento dopo che si alza l'ora se ne va. In verticale la pagina scorre come sempre (touch-action pan-y).

Con il movimento ridotto

Tutto cambia subito: i pezzi dell'icona, i colori, la curva e le cifre; i raggi non girano, le gocce e i fiocchi stanno fermi, il fulmine resta acceso senza lampeggiare, niente saltello e niente entrata.

Trappole

GSAP riscrive l'attributo transform di un elemento SVG che anima: se il pezzo è messo al suo posto con transform, il primo tween lo sposta. Il posto va su un gruppo esterno che non si anima mai.
Gocce che partono tutte nello stesso istante cadono come una tenda: ogni giro va cominciato in un punto a caso.
Una parola che rotola deve fermare tutta la timeline del giro prima: con clic veloci il richiamo rimasto in ritardo riscriverebbe la parola vecchia.
Con la scala di ogni giorno presa dal giorno stesso, un giorno freddo sembrerebbe caldo quanto uno caldo: la scala è quella della settimana.
Sulla curva touch-action pan-y lascia alla pagina lo scorrimento verticale e dà allo script i movimenti di lato; un movimento in verticale annulla il gesto (pointercancel) e l'ora se ne va.

Librerie

GSAP 3.15.0, Quicksand (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,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.