Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La chioma che cambia forma
Scorri dentro l’anteprima
Il racconto allo scroll di una residenza, nello stile minimal: due cornici a forma di chioma, con dentro una facciata di rami a linee sottili, cambiano forma una nell’altra mentre si scende, e la facciata passa dal giorno alla sera. A sinistra tre frasi, una alla volta, che salgono dalla sfocatura e prendono peso.
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 canopy that changes shape</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up residence, Linden Court. A long scroll holds one still stage: three short statements on the left, and
on the right two frames cut in the shape of a tree crown, with a facade of thin branches inside. As you scroll
the frames change shape, one into the next, and the facade turns from day to evening -->
<section class="corsa" data-corsa>
<div class="palco" data-palco>
<div class="testi">
<article class="schermo" data-schermo>
<p class="occhiello">Linden Court design</p>
<h2 class="frase" data-frase>A facade shaped like a canopy.</h2>
</article>
<article class="schermo" data-schermo>
<p class="occhiello">The idea</p>
<h2 class="frase" data-frase>Not another tower: a grove that grew in the city.</h2>
</article>
<article class="schermo" data-schermo>
<p class="occhiello">The homes</p>
<h2 class="frase" data-frase>A new chapter in quiet living.</h2>
<a class="vai" href="#" data-vai>See the homes</a>
</article>
</div>
<svg class="cornici" viewBox="0 0 100 100" aria-hidden="true" data-cornici>
<defs>
<clipPath id="forma-grande" clipPathUnits="userSpaceOnUse"><path data-grande /></clipPath>
<clipPath id="forma-piccola" clipPathUnits="userSpaceOnUse"><path data-piccola /></clipPath>
</defs>
<g clip-path="url(#forma-grande)">
<g data-giorno-grande></g>
<g data-sera-grande></g>
</g>
<path class="bordo" data-bordo-grande />
<g clip-path="url(#forma-piccola)">
<g data-giorno-piccola></g>
<g data-sera-piccola></g>
</g>
<path class="bordo" data-bordo-piccola />
</svg>
<div class="avanza">
<span class="avanza__nome" data-nome>Facade</span>
<span class="avanza__riga"><span class="avanza__pieno" data-pieno></span></span>
</div>
</div>
</section>
<footer class="fine">
<p>Linden Court, homes among the trees.</p>
</footer>
<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/gsap@3.15.0/dist/MorphSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/SplitText.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.
24 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 «La chioma che cambia forma» da Animorio e adattala al mio sitoCosa fa
Linden Court, una residenza inventata, si racconta in uno scroll lungo che tiene ferma la scena. A destra due cornici ritagliate come chiome d’albero, una grande e una piccola, con dentro una facciata di tronchi sottili che si biforcano salendo. Scendendo, le cornici cambiano forma due volte, una nell’altra, legate allo scroll, e la facciata passa dal sabbia del giorno al verde pino della sera, coi rami che diventano oro. A sinistra tre frasi, una alla volta: a ogni cambio le lettere della vecchia salgono e si sfocano, quelle della nuova arrivano dal basso, sfocate e leggere, e si posano prendendo peso. In basso il nome della frase e una riga sottile che si riempie con lo scroll.
Come funziona
Le forme
Ogni cornice è un clipPath di SVG. Le forme sono quadrilateri con gli angoli arrotondati, scritti da una funzione che da ogni angolo fa una curva quadratica: tutte hanno gli stessi quattro angoli, così MorphSVGPlugin le trasforma una nell’altra senza grovigli. Lo stesso tracciato fa anche il bordo sottile.
La facciata
Dentro ogni cornice ci sono due gruppi uguali, il giorno e la sera: un rettangolo di colore e un tracciato di rami, tronchi che salgono e si biforcano tre volte con angoli e lunghezze a caso (un caso con il seme, quindi sempre uguale). La sera sta sopra al giorno e la sua opacità sale con lo scroll.
Lo scroll
Una timeline di GSAP legata allo scroll della sezione, con scrub di SCRUB secondi: i due cambi di forma partono ai punti di MORPH_AT e durano MORPH_FOR della corsa, con ease none come sul sito; la cornice piccola parte un attimo dopo la grande. Intanto la sera sale e tutto ruota di due gradi. Lenis rende lo scroll morbido.
Le frasi
SplitText divide ogni frase in lettere. Uno ScrollTrigger guarda a che terzo della corsa si è arrivati e cambia frase: le lettere vecchie salgono e si sfocano, le nuove partono da RISE rem sotto, sfocate di BLUR pixel e col peso WEIGHT_FROM, e arrivano a 340 una dopo l’altra (STAGGER) con power3.out. Il carattere è variabile, quindi il peso cambia in modo continuo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SCRUB | script.js | 0.8 | Quanto morbide le cornici seguono lo scroll, in secondi. |
MORPH_AT | script.js | [0.15, 0.5] | Dove partono i due cambi di forma, in frazioni della corsa. |
MORPH_FOR | script.js | 0.25 | Quanta corsa prende ogni cambio di forma. |
STAGGER | script.js | 0.025 | Il distacco fra una lettera e l’altra. |
BLUR | script.js | 4 | Quanto sono sfocate le lettere all’inizio, in pixel. |
RISE | script.js | 2 | Da quanto sotto partono le lettere, in rem. |
WEIGHT_FROM | script.js | 200 | Il peso da cui partono le lettere; si posano a 340. |
BRANCHES | script.js | 6 | Quanti tronchi ha la facciata. |
Quando usarla
Per la presentazione di una residenza, di un albergo, di uno studio di architettura o di un marchio che vuole raccontare un’idea in tre frasi, con due immagini che cambiano forma. Al posto dei rami si possono mettere due foto.
Sul telefono
Uguale, con le cornici sopra e le frasi sotto, più piccole.
Con il movimento ridotto
Le cornici non cambiano forma davanti agli occhi: a ogni frase svaniscono, prendono la forma nuova e tornano. Le lettere arrivano solo in dissolvenza, già col loro peso, e lo scroll non è ammorbidito.
Trappole
- Le forme da trasformare devono avere lo stesso numero di angoli e partire dallo stesso angolo: altrimenti MorphSVG le fa ruotare o le annoda a metà strada.
- Il cambio di frase non va legato allo scrub ma a un indice: con lo scrub le lettere resterebbero a metà, sfocate, quando ci si ferma.
- Nel tracciato dei rami ci vuole vector-effect: non-scaling-stroke: le cornici sono un SVG ingrandito e senza le linee diventerebbero grosse.
- Il peso delle lettere si anima solo se il carattere è variabile e caricato con l’asse dei pesi; con un carattere fisso salta da un peso all’altro.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Fraunces (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,9 KB; le librerie: GSAP + ScrollTrigger + SplitText + MorphSVG 58 KB, Lenis 5,3 KB.
Collaudo
Provata il 17 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.
