Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
Il manifesto in cantiere
Scorri dentro l’anteprima
Il manifesto di uno studio di architettura si costruisce come un edificio mentre scorri: il disegno tratteggiato, il ponteggio che sale piano per piano, la gru che porta ogni parola appesa a una trave e la posa oscillando, la benna che versa il cemento nelle lettere, poi via casseri, ponteggio e gru.
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 manifesto under construction</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="apertura">
<p class="apertura__studio">Kalk Architects</p>
<h1 class="apertura__titolo">Our manifesto is still a building site.</h1>
<p class="apertura__nota">Scroll down and watch it go up: drawn, scaffolded, lifted, poured, stripped.</p>
</section>
<!-- il cantiere: una scena alta molti schermi, il palco resta fermo (sticky) e lo scorrimento manda avanti i lavori -->
<section class="scena" data-scena aria-label="The manifesto, built as you scroll">
<div class="palco" data-palco>
<h2 class="nascosto" data-titolo>Form follows care</h2>
<svg class="cantiere" data-cantiere aria-hidden="true" focusable="false"></svg>
<p class="motto" data-motto>Everything temporary comes down. The words stay.</p>
<!-- la palizzata del cantiere, in basso: il nome dello studio e la fase dei lavori -->
<div class="palizzata" data-palizzata>
<p class="palizzata__studio">Kalk Architects</p>
<p class="palizzata__fase"><span class="palizzata__ora">Now</span> <span class="fase" data-fase aria-live="polite"></span></p>
</div>
</div>
</section>
<section class="chiusura">
<h2 class="chiusura__titolo">Form follows care.</h2>
<p class="chiusura__testo">We draw slowly, build in the open and take down everything that was only there to help. What is left has to stand on its own.</p>
</section>
</main>
<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="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.
31 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 manifesto in cantiere» da Animorio e adattala al mio sitoCosa fa
Il cantiere di Kalk Architects, uno studio inventato, sta su un palco fermo mentre la pagina scorre: in alto il braccio arancione di una gru a torre, in basso la palizzata scura con il nome dello studio e la fase dei lavori, che cambia con le lettere che salgono dalla loro maschera (Drawing, Scaffolding, Lifting, Pouring, Striking, Handover). Prima compare il disegno: i contorni delle tre parole, FORM FOLLOWS CARE, tratteggiati in blu, con una quota orizzontale e una verticale. Poi si costruisce dal basso, un piano per parola. Il ponteggio sale: i tubi spuntano da terra con un piccolo rimbalzo, corre il traverso, si tirano le diagonali, i giunti scattano al loro posto e le tavole cadono una per una e rimbalzano. Intanto la gru porta la parola di quel piano: le lettere sono gabbie d'armatura dentro casseri arancioni, appese con le funi a una trave di sollevamento; arrivano da sinistra, oscillano indietro quando il carrello accelera e avanti quando frena, si calmano e scendono sulle tavole, che si flettono, mentre si alza un po' di polvere. Il gancio si sgancia, risale ed esce a prendere la parola dopo. Con le tre parole al loro posto arriva la benna del cemento col suo tubo: passa sopra ogni lettera, il getto scende e il cemento bagnato sale dentro la lettera con un'onda che scivola di lato. Alla fine i casseri si staccano, il cemento si asciuga e si schiarisce mostrando le righe delle tavole e i fori dei tiranti, il ponteggio si smonta dall'alto (le tavole volano via girando, i tubi rientrano in terra), il braccio della gru gira via e la torre scende. Restano le parole di cemento e una frase: Everything temporary comes down. The words stay. Tornando su, il cantiere si rimonta al contrario.
Come funziona
Una timeline sola e un ridisegno
La scena è alta nove schermi e il palco è sticky (100lvh). Tutto il cantiere è una timeline GSAP in pausa, guidata da ScrollTrigger con scrub: i pezzi fermi (tubi, tavole, contorni, casseri) li muove la timeline direttamente; la gru e i carichi invece sono un oggetto di stato (posizione del gancio, lunghezza del cavo, angolo di oscillazione, che cosa porta) e a ogni aggiornamento la funzione disegna() li ridisegna da quei numeri. I cambi istantanei (la parola che si aggancia, si sgancia, la benna al posto della trave) sono tl.set, che tornando indietro si annullano da soli.
Le misure dal carattere
Il palco è un SVG con il viewBox grande quanto la finestra, così un'unità è un pixel. Ogni lettera si misura con getComputedTextLength a sei larghezze del carattere (Archivo, asse wdth da 125 a 66) e l'altezza delle maiuscole con measureText su una canvas. Lo script sceglie la larghezza più ampia per cui la scritta riempie il palco quanto lo permette l'altezza; tutto il resto (tubi, tavole, gancio, benna, funi) si conta in altezze di lettera. Sul telefono la scritta è più stretta, avanza cielo e la scritta sale: il piano più basso del ponteggio diventa alto e prende traversi e diagonali in mezzo.
Il pendolo
Tutto quello che pende dalla gru sta in un gruppo ruotato intorno al carrello; la parola appesa riceve la stessa rotazione più uno spostamento che porta la sua cima sotto il gancio. L'angolo segue una serie di keyframe: va indietro con sine.out mentre il carrello accelera (power2.inOut), avanti quando frena, poi oscilla sempre meno mentre la parola scende. Quando tocca, il gancio e le tavole scendono di un soffio insieme e tornano con elastic.out, e due sbuffi di polvere si allargano e spariscono.
Il cemento che sale
Ogni lettera ha tre strati: la gabbia (un pattern di tondini ritagliato con un clipPath fatto della lettera), il getto e il cassero (la lettera senza riempimento, col contorno arancione). Il getto è la lettera piena ritagliata da un secondo clipPath: un'onda sinusoidale col fondo pieno, che lo script sposta in su con il livello e di lato di una frazione d'onda, così la superficie si muove mentre sale. Il cemento bagnato è una copia più scura sopra quella asciutta; asciugando sparisce e scopre il pattern con le righe delle tavole e i fori dei tiranti.
Il disarmo
Il ponteggio si smonta dal piano più alto: le tavole volano via girando con back.in, i giunti si chiudono, le diagonali si cancellano spostando lo stroke-dashoffset oltre la loro lunghezza, i traversi si accorciano e i tubi rientrano in terra con scaleY verso il basso. La gru riporta il gancio vicino alla torre, il braccio si stringe con scaleX intorno alla torre (sembra girare via) e la torre scende fuori dal palco. Una lettera finita, toccata col mouse, fa un piccolo salto elastico.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
WORDS | script.js | ['FORM', 'FOLLOWS', 'CARE'] | Le parole del manifesto, una per piano, dall'alto in basso: si costruiscono dal basso. Funziona da una a cinque parole; più sono lunghe, più il carattere si stringe. |
LENGTH | script.js | 9 | Quanti schermi di scorrimento dura il cantiere: di più vuol dire lavori più lenti. |
SMOOTH | script.js | 0.8 | Quanto i lavori inseguono lo scorrimento, in secondi: 0 li lega al dito, 2 li fa arrivare con calma. |
SWING | script.js | 1 | Quanto oscillano le parole e la benna appese alla gru (0 = fermi come su un binario). |
BOUNCE | script.js | 1 | Quanto rimbalzano tubi, giunti e tavole e quanto si flettono le tavole quando la parola si posa. |
DRY | script.js | true | Il cemento si asciuga, si schiarisce e mostra le righe delle tavole e i fori dei tiranti. Con false resta scuro e liscio. |
--gru, --gesso, --cemento | style.css | #E8642C, #3F6FAE, #A9A49B | Il colore della gru e dei casseri, del disegno tratteggiato e del cemento asciutto; accanto ci sono quelli di ponteggio, tavole, armatura e cemento bagnato. |
Quando usarla
Per l'apertura o la pagina «chi siamo» di uno studio di architettura, di un'impresa edile, di un ingegnere o di un'agenzia che vuole raccontare il proprio metodo come un cantiere; per lo slogan di un'immobiliare o di un nuovo complesso residenziale, o per una pagina «lavori in corso» che diventa un evento.
Sul telefono
Lo stesso cantiere con le misure adattate: la torre della gru resta fuori dallo schermo e si vede il braccio che entra da destra, il carattere si stringe perché la parola più lunga ci stia, e la scritta sale a metà schermo con un ponteggio più alto sotto.
Con il movimento ridotto
Niente si sposta e niente oscilla: scorrendo compaiono in dissolvenza il disegno, poi le gabbie nei casseri, poi il cemento; i casseri e il disegno svaniscono, il cemento si asciuga e arriva la frase. Gru e ponteggio non ci sono, e la scena è lunga quattro schermi invece di nove.
Trappole
- Calando la parola di un piano basso dopo aver montato tutto il ponteggio, le lettere passavano davanti alle tavole dei piani di sopra: si costruisce un piano alla volta, dal basso, e il ponteggio sopra sale solo dopo la posa.
- Le diagonali cancellate con lo stroke-dashoffset lasciavano un puntino in fondo alla linea: il vuoto del tratteggio è un po' più lungo della linea e la diagonale svanisce anche in opacità.
- Gli sbuffi di polvere fatti con fromTo da opacità 0,6 a 0 ricomparivano tornando su, perché un tween riavvolto mostra il suo inizio: si fanno con due keyframe, da 0 a 0,6 e di nuovo a 0.
- Sul telefono la parola più lunga decide la grandezza e sopra restava mezzo schermo di cielo vuoto: la scritta sale di una parte del cielo avanzato e il piano più basso del ponteggio si allunga fino a terra con dei livelli in mezzo.
- La gru e i carichi non possono stare in tween separati sugli elementi, perché la parola appesa deve girare intorno al carrello come il gancio: sono numeri in un oggetto, e una funzione sola ridisegna gancio, funi, trave, benna e parola a ogni aggiornamento.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 14 KB; le librerie: GSAP + ScrollTrigger 45 KB.
Collaudo
Provata il 13 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.
