Le colonne di colore
Hover, SVG
NuovaGratis
Torna alla libreria
Le foglie che si voltano
Animazione hover nello stile minimal: un campo di foglie disegnate con un tratto solo, pettinate tutte nello stesso verso su un bianco caldo; il puntatore passa come il vento e le foglie vicine si voltano sulla nervatura, mostrano il rovescio verde salvia e tornano su una molla con un piccolo dondolio. Dietro al nome di un vivaio inventato.
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>Hedgerow</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a combed hedge of thin leaves on a canvas behind the page; the pointer passes like wind and the leaves near it
turn over on their midrib, show their sage underside and swing back -->
<main class="pagina" data-pagina>
<canvas class="fondo" aria-hidden="true" data-fondo></canvas>
<section class="eroe">
<div class="blocco" data-blocco>
<p class="occhiello" data-entra>A nursery for slow gardens</p>
<h1 class="titolo"><span class="titolo__dentro" data-titolo>Hedgerow</span></h1>
<div class="azione" data-entra>
<a class="pillola" href="#">
<span class="pillola__scritta" data-testo="Visit the nursery">Visit the nursery</span>
<svg class="pillola__freccia" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 8h10.5M9 3.8 13.2 8 9 12.2" /></svg>
</a>
</div>
</div>
</section>
<footer class="piede">
<p data-nota>Hedges, ferns and shade plants</p>
<p data-nota>Open Thursday to Sunday</p>
</footer>
</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.
21 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 «Le foglie che si voltano» da Animorio e adattala al mio sitoCosa fa
Un bianco caldo coperto da un campo di foglie piccole, disegnate con un tratto solo grigio: il contorno a mandorla, la nervatura e un accenno di picciolo, tutte girate nello stesso verso come una siepe pettinata, con un filo di disordine. All'apertura le foglie spuntano dal centro verso i bordi e il nome del vivaio, Hedgerow, sale dalla sua finestra leggero e si posa pieno. Il puntatore passa come il vento: le foglie vicine si voltano sulla nervatura, si stringono fino a una riga e si riaprono dall'altra parte mostrando il rovescio, pieno di verde salvia con la nervatura chiara; restano voltate un attimo e tornano su una molla, con un filo di troppo e un piccolo dondolio nel verso del vento. Partono prima le più vicine, quindi il soffio si allarga ad anello; più il puntatore corre, più largo è il soffio. Intorno al nome, alla riga sopra e alla pillola le foglie si diradano, così le parole stanno sul bianco pulito. Quando nessuno muove il puntatore, un puntatore finto passeggia per la pagina.
Come funziona
La siepe pettinata
Su un canvas a tutta pagina (devicePixelRatio fino a 2) si mette una foglia ogni SPACING pixel, a file sfalsate di mezzo passo come foglie su rami paralleli. Ogni foglia ha il verso della siepe (COMB) più un filo di disordine e una scala presi da un numero pseudocasuale fisso della sua posizione, quindi la siepe è uguale a ogni visita. Intorno al blocco del titolo e alle note in basso le foglie sfumano: piene fuori, sparite dentro, una piuma in mezzo.
Una foglia, due archi
Ogni foglia è due curve quadratiche fra le due punte, una per lato, più la nervatura e il picciolo. Il giro sulla nervatura è un angolo a da 0 a π: la larghezza della foglia si moltiplica per cos(a), quindi si stringe fino a una riga a metà giro e si riapre dall'altra parte. Quando cos(a) è negativo la foglia mostra il rovescio: si riempie di verde salvia e la nervatura diventa chiara. La metà che si alza fa scivolare la foglia di un niente di lato, così si vede da che parte gira.
Il soffio
A ogni fotogramma ogni foglia dentro il raggio del puntatore riceve un momento in cui voltarsi (prima le più vicine: un ritardo che cresce con la distanza) e uno in cui tornare (più tardi per quelle al centro del soffio). Il raggio parte da REACH, si stringe sugli schermi piccoli e si allarga con la velocità del puntatore. Il verso del giro dipende da dove corre il puntatore rispetto alla foglia.
La molla e il dondolio
L'angolo va verso π o verso 0 con una molla scritta a mano (SPRING: rigidità e attrito), integrata sul ticker di GSAP: un filo di overshoot e l'assestamento. Un secondo numero, il dondolio, ruota la foglia nel suo piano: lo spinge la velocità del giro, quindi la foglia che si volta si piega appena nel verso del vento e torna.
Il puntatore finto e il ridotto
Un puntatore finto segue una curva di Lissajous legata a una timeline GSAP di dodici secondi che si ripete, e lo insegue su una molla morbida; il puntatore vero lo sostituisce per 2,4 secondi a ogni movimento. Un IntersectionObserver spegne il ticker quando la pagina non si vede. Con il movimento ridotto le foglie non girano: dove passa il puntatore vero il rovescio arriva e se ne va in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPACING | script.js | 34 | La distanza fra una foglia e l'altra, in px (sul telefono un poco di più). |
LEAF_SIZE | script.js | 24 | La lunghezza di una foglia, in px. |
LEAF_WIDTH | script.js | 0.42 | La larghezza della foglia rispetto alla sua lunghezza: poco è un ago di pino, tanto una foglia tonda. |
COMB | script.js | -38 | Il verso della siepe pettinata, in gradi. |
REACH | script.js | 110 | Fin dove arriva il soffio del puntatore fermo, in px. |
GUST | script.js | 1.2 | Quanto si allarga il soffio quando il puntatore corre. |
HOLD | script.js | 0.55 | Quanti secondi una foglia resta voltata. |
SPRING | script.js | [150, 12] | La molla che volta e rimette le foglie: quanto è rigida e quanto è frenata. |
LINE | script.js | 1 | Lo spessore del tratto, in px. |
Quando usarla
Come fondo della prima schermata di un vivaio, di un giardiniere o di uno studio di paesaggio, di un negozio di piante o di tè, di un hotel in campagna o di un marchio di cosmetici naturali; in generale dietro a un titolo corto quando si vuole una pagina viva ma calma, che reagisce al passaggio senza rubare la scena.
Sul telefono
Le stesse animazioni a misure adattate: le foglie sono un poco più grandi e più rade, il soffio si stringe con lo schermo, il titolo è più piccolo e la zona pulita lo segue. Il dito volta le foglie mentre tocca e trascina; quando si alza torna il puntatore finto.
Con il movimento ridotto
Il campo è fermo e le foglie non girano: dove passa il puntatore vero il loro rovescio verde arriva e se ne va in dissolvenza. Niente puntatore finto, niente nascita dal centro; il titolo, la riga piccola e la pillola compaiono in dissolvenza.
Trappole
- La larghezza moltiplicata per cos(a) basta a fare lo scorcio del giro, ma da sola non dice da che parte gira la foglia: la metà che si alza fa scivolare la foglia di una frazione della sua lunghezza verso il verso del giro, ed è quello che si vede.
- Il primo soffio dopo l'apertura era enorme: il puntatore finto arrivava di corsa da fuori e la velocità allargava il raggio. Ora il puntatore vero, quando ritorna dopo una pausa, parte da dove si trova e non da dove era rimasto quello finto.
- Sul telefono un raggio in pixel uguale al computer copriva un quarto dello schermo: si stringe con la larghezza della pagina, fino al 65%.
- Fraunces non ha l'asse della larghezza: la pillola elastica qui allarga la spaziatura delle lettere invece dell'asse wdth.
Librerie
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 6,8 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 21 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.
