Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
L'albero delle stagioni
Scorri dentro l’anteprima
Un grande albero su una collina e, scorrendo, passa un anno intero: in primavera gemme e fiori rosa che si aprono, in estate la chioma piena che ondeggia e i frutti, in autunno le foglie che cambiano colore e cadono volteggiando fino ad ammucchiarsi, in inverno la neve sui rami. Su un ramo c'è un nido dove i pulcini nascono, crescono e volano via.
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 tree of the seasons</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scena>
<div class="palco" data-palco>
<!-- il cielo: lo script ne fonde i colori stagione per stagione -->
<div class="cielo" data-cielo aria-hidden="true"></div>
<!-- la collina, l'albero, il nido, la neve: lo script li disegna -->
<svg class="mondo" data-mondo aria-hidden="true" focusable="false"></svg>
<header class="testata">
<p class="marchio">
<svg class="marchio__segno" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M16 29V14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/><path d="M16 17c-7 0-11-4-11-12 7 0 11 4 11 12Z" fill="currentColor"/><path d="M16 21c6 0 10-3.4 10-10-6 0-10 3.4-10 10Z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/></svg>
<span>Linden Hill Nursery</span>
</p>
<a class="pianta" href="#"><span class="pianta__fondo" aria-hidden="true"></span><span class="pianta__testo">Plan your planting</span></a>
</header>
<section class="racconto">
<p class="occhiello">The year of the old linden</p>
<h1 class="stagione" data-stagione aria-live="polite"></h1>
<p class="mese"><span class="mese__nome" data-mese></span><span class="mese__consiglio" data-consiglio></span></p>
<div class="riga" data-riga></div>
</section>
<p class="cenno" data-cenno>Scroll through the year</p>
</div>
</main>
<!-- le quattro stagioni: il nome e la riga -->
<ul class="stagioni" data-stagioni hidden>
<li data-nome="Spring">Buds swell, blossoms open and a pair of robins move into the old linden.</li>
<li data-nome="Summer">Full shade, ripe fruit and three hungry chicks that will not stop calling.</li>
<li data-nome="Autumn">The leaves turn gold and copper, then come down to tuck the roots in.</li>
<li data-nome="Winter">Bare branches, fresh snow and a quiet nest waiting for March.</li>
</ul>
<!-- i dodici mesi del calendario del vivaio: il nome e il lavoro del mese -->
<ul class="mesi" data-mesi hidden>
<li data-nome="March">Feed the roots</li>
<li data-nome="April">Plant out seedlings</li>
<li data-nome="May">Mulch the beds</li>
<li data-nome="June">Water at dusk</li>
<li data-nome="July">Thin the fruit</li>
<li data-nome="August">Pick and share</li>
<li data-nome="September">Sow wildflowers</li>
<li data-nome="October">Rake for the compost</li>
<li data-nome="November">Plant bare-root trees</li>
<li data-nome="December">Wrap young trunks</li>
<li data-nome="January">Prune on dry days</li>
<li data-nome="February">Order spring seeds</li>
</ul>
<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="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.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.
45 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 «L'albero delle stagioni» da Animorio e adattala al mio sitoCosa fa
La pagina di un vivaio inventato, Linden Hill Nursery, ferma sullo schermo mentre si scorre: un grande albero spoglio su una collina, colline lontane, il sole e qualche nuvola che passa. Tutta la discesa è un anno, da marzo a febbraio. In primavera sui rami spuntano le gemme rosa scuro, che si aprono una a una in fiori di cinque petali con un rimbalzo elastico; poi nascono le foglie verde chiaro, e a fine primavera i petali si staccano e scendono volteggiando. Intanto arriva in volo un pettirosso che si posa sul bordo del nido, compaiono tre uova azzurre che tremano e si schiudono, e ne escono tre pulcini grigi che aprono il becco perché hanno fame. In estate la chioma è piena e verde scuro e ondeggia nel vento, i frutti spuntano verdi e diventano rossi, i pulcini crescono e mettono le piume e il petto arancione. In autunno ogni foglia diventa oro, rame o rossa per conto suo, i frutti cadono rimbalzando sul prato, i pulcini e la mamma volano via uno dopo l'altro e le foglie si staccano e scendono girando su se stesse fino ad ammucchiarsi ai piedi del tronco, dove scuriscono. In inverno il cielo diventa grigio azzurro, comincia a nevicare, la neve si stende sui rami uno a uno, copre la collina, il mucchio di foglie e il nido vuoto. Il cielo e la collina cambiano colore con le stagioni e il sole sta alto d'estate e basso d'inverno. A sinistra il nome della stagione cambia con le lettere che arrivano dal basso e rimbalzano (dall'alto se si risale), sotto il mese e il lavoro del mese nel calendario del vivaio rotolano via, e la riga della stagione sale parola per parola.
Come funziona
Lo scorrimento è un anno
Un solo tween porta un numero da 0 (inizio marzo) a 1 (fine febbraio) mentre la scena scende dall'inizio alla fine (start top top, end bottom bottom, scrub 0,8). A ogni fotogramma una funzione sola disegna tutto da quel numero: cielo, collina, foglie, frutti, neve, nido. Lenis rende morbido lo scorrimento e passa ogni passo a ScrollTrigger.update.
Un albero col seme fisso
Il tronco si divide in due o tre rami, e ognuno di nuovo, cinque volte, con angoli e lunghezze presi da un generatore di numeri a caso col seme fisso: ogni volta lo stesso albero, e cambiando TREE_SEED ne nasce un altro. Ogni ramo è una forma piena che si assottiglia lungo una curva, con un nodo tondo dove si divide. Foglie, fiori e frutti stanno su punti presi a caso sui rami sottili.
Soglie che rimbalzano
Ogni gemma, fiore, foglia, frutto, uovo e pulcino ha il suo momento dell'anno. Quando lo scorrimento lo passa parte un tween con elastic.out sul suo valore di crescita, e tornando indietro un tween corto lo richiude: così lo scrub resta preciso e l'arrivo ha sempre il suo rimbalzo.
Cadute calcolate
Una foglia che cade non ha un tween: la sua posizione è una funzione dell'anno, fra il punto sul ramo e il suo posto nel mucchio, con un'onda di lato, una rotazione e un ribaltamento (scaleX che passa da 1 a -1) per il volteggio. Per questo funziona anche risalendo, e le foglie tornano sui rami. I frutti scendono con la curva bounce.out.
Testi che rimbalzano
Il nome della stagione è diviso in lettere dentro caselle con overflow: hidden: le vecchie escono in alto, le nuove entrano dal basso schiacciate e rimbalzano con elastic.out, al contrario se si risale. Il mese e il lavoro del mese rotolano con back.out, la riga sale parola per parola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LEAVES | script.js | 420 | Quante foglie ha la chioma d'estate. Sono anche quelle che poi cadono nel mucchio. |
BLOSSOMS | script.js | 70 | Quanti fiori si aprono in primavera; 0 salta la fioritura. |
FRUITS | script.js | 16 | Quanti frutti maturano d'estate e cadono in autunno. |
SNOWFLAKES | script.js | 90 | Quanti fiocchi cadono d'inverno; 0 lascia solo la neve posata. |
WIND | script.js | 1 | Quanto ondeggiano foglie e frutti nel vento; 0 li ferma. |
TREE_SEED | script.js | 7 | Il seme dell'albero: ogni numero fa crescere un albero diverso. |
--cielo-primavera … --cielo-inverno | style.css | #9fd0ea, #5aaee6, #e9b98a, #a9b6cc | Il cielo di ogni stagione; in basso sfuma da solo verso il chiaro. |
--foglia-oro, --foglia-rame, --foglia-rossa | style.css | #e8b62f, #d9702a, #b8402e | I tre colori delle foglie d'autunno, scelti a caso foglia per foglia. |
Quando usarla
Per raccontare il tempo che passa in un anno: un vivaio o un giardino, un'azienda agricola, un calendario delle semine, una cantina, un parco, una pagina «la nostra storia» che va per stagioni.
Sul telefono
Lo stesso anno con le misure adattate: il testo sta in alto a tutta larghezza e l'albero sotto, inquadrato in modo che la chioma entri sempre tutta nello schermo, col nido e gli uccelli in proporzione.
Con il movimento ridotto
Niente scorre in modo continuo: l'anno va a scatti, una stagione alla volta, e ogni cambio è una dissolvenza. Fiori, foglie, frutti e pulcini compaiono sfumando senza rimbalzi, le foglie sono già sui rami o già nel mucchio (mai a mezz'aria), le foglie non ondeggiano, la neve sta ferma e i testi cambiano in dissolvenza.
Trappole
- Animare con un tween ogni foglia che cade non regge lo scrub all'indietro: la posizione della foglia si calcola dall'anno, così risalendo torna sul ramo da sola. I tween servono solo per i rimbalzi di arrivo, sul valore di crescita.
- Centinaia di foglie a ogni fotogramma: scrivere un attributo uguale a quello di prima costa comunque. Si scrive solo quando il valore cambia (lo si ricorda sull'elemento), e le foglie sono tutte un <use> dello stesso disegno.
- La neve sui rami fatta con stroke-dasharray e linecap round lascia un puntino bianco anche a zero: finché non nevica il tratto ha opacità 0.
- Un viewBox fisso con slice taglia la chioma sul telefono: l'inquadratura si calcola dalla misura della chioma, così entra sempre tutta, e il palco è alto 100lvh e si reinquadra solo se cambia davvero la misura (non per la barra di Safari).
- Pulcini davanti al nido sembrano appoggiati sopra: il nido è in due pezzi, il fondo dietro e il bordo davanti, e i pulcini stanno in mezzo.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 11 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.
