Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
L’ascensore allo scroll
Scorri dentro l’anteprima
Un palazzo tagliato a metà come una casa delle bambole, con un ascensore di vetro al centro: scorrendo la cabina sale piano per piano, frena, rimbalza sui cavi, apre le porte e il piano si accende con la sua scenetta. Il passeggero piega le ginocchia alle partenze e si alza in punta di piedi alle frenate.
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 lift up the building</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/dm-mono@5.3.0/500.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up coworking building cut open like a doll's house. The stage sticks while you scroll: a glass lift rides
up the middle floor by floor, brakes and bounces, opens its doors, and the floor it stops at switches on.
The building, the rooms and the passenger are SVG drawn by the script -->
<main>
<section class="corsa" data-corsa>
<div class="palco">
<div class="finestra" data-finestra>
<svg class="palazzo" data-palazzo aria-hidden="true"></svg>
</div>
<aside class="testo">
<p class="testo__marchio">Halden Works · Coworking</p>
<div class="testo__testa">
<div class="quadro" aria-hidden="true">
<svg class="quadro__freccia" data-freccia viewBox="0 0 20 20"><path d="M10 2.5 17 11h-4.6v6.5H7.6V11H3z"/></svg>
<span class="quadro__cifra" data-cifra><span>G</span></span>
</div>
<div class="testo__nomi">
<p class="testo__piano" data-piano><span>Ground floor</span></p>
<h2 class="testo__titolo" data-titolo><span>Halden Works</span></h2>
</div>
</div>
<p class="testo__riga" data-riga><span>Six floors of desks, books and fresh air. Step in, the lift is waiting.</span></p>
<nav class="pulsantiera" data-pulsantiera aria-label="Floors"></nav>
<p class="testo__cenno" data-cenno>Scroll to ride up</p>
</aside>
</div>
</section>
<section class="uscita">
<p class="uscita__marchio">Halden Works</p>
<h2 class="uscita__titolo">Top floor. Mind the doors.</h2>
<a class="tasto" href="#"><span>Book a desk</span></a>
</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="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.
33 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’ascensore allo scroll» da Animorio e adattala al mio sitoCosa fa
Il palco resta fermo per tutta la corsa: a sinistra lo spaccato di Halden Works, un coworking inventato di sei piani, a destra il nome del piano, una riga di testo e la pulsantiera dell’ascensore. Al centro del palazzo c’è il vano, con le guide, il contrappeso e in cima, sul tetto, la sala macchine con la ruota dei cavi; dentro il vano una cabina di vetro con un passeggero (una sagoma senza volto, con la borsa a tracolla). Si parte dall’atrio con le porte aperte: l’insegna cade lettera per lettera, la porta girevole gira, il campanello del bancone suona. Scorrendo le porte si chiudono e la cabina sale: i cavi si accorciano, la ruota gira, il contrappeso scende, le solette passano davanti alla cabina, le nuvole dietro le finestre scorrono più piano del palazzo e la camera segue con un filo di ritardo. A ogni piano la cabina frena, va un poco oltre e si assesta con un rimbalzo, e il passeggero ci reagisce: si abbassa sulle ginocchia alla partenza, si allunga alla frenata, le braccia si allargano e la borsa sobbalza. Poi le porte scorrono via, la luce del piano si accende con un piccolo sfarfallio e la stanza prende vita: negli uffici gli schermi scrivono, il grafico si disegna, i post-it saltano fuori e la stampante stampa; in palestra il tappetino si srotola, il sacco dondola, il tapis roulant corre e il cronometro conta; in biblioteca la lampada si accende, i libri saltano in fila, la scala scorre sulla sua guida, la pagina si volta e il gatto muove la coda; nel giardino pensile le piante crescono con un elastico, l’irrigazione gocciola, i vasi appesi oscillano, volano due farfalle e l’annaffiatoio si inclina; sul tetto l’ombrellone si apre, la bandiera sale e sventola, i gagliardetti scendono e passano gli uccelli. Il numero del piano cambia nella cabina, sulla targa accanto alla porta, nel display grande e sulla pulsantiera; la freccia si accende mentre la cabina viaggia e si gira quando scende. Il testo cambia con le lettere che saltano. Toccando un pulsante della pulsantiera la pagina scorre da sola fino a quel piano. Tornando su, tutto si ripete all’indietro e i piani lasciati si spengono.
Come funziona
Un palazzo in un SVG solo
Lo script disegna tutto in un SVG: il cielo è il fondo CSS della finestra, poi un livello di nuvole, poi il mondo (terra, vano, stanze, sala macchine, cabina, solette). Un piano è alto 340 unità e ogni stanza è disegnata in una scatola larga 380, attaccata al vano: sul telefono le stanze sono più strette e si vede solo la parte vicina all’ascensore, quindi le cose importanti stanno lì. I muri di fondo sono un tracciato con la finestra ritagliata (fill-rule evenodd), così dietro si vedono il cielo e le nuvole. Il viewBox ha la larghezza del palazzo e l’altezza presa dalla forma della finestra.
La corsa divisa in pezzi
Lo scorrimento della sezione diventa una posizione lungo la corsa, divisa in pezzi: ferma (porte aperte), chiude, viaggio, apre, ferma, e così via fino al tetto. Da quel numero una funzione dice a che piano è la cabina (con power2.inOut nei viaggi) e quanto sono aperte le porte (back.out all’apertura, così sbattono un poco). La sezione è alta 100lvh più tanti lvh quanti sono i pezzi, quindi più piani vuol dire più scroll; SPEED accorcia i viaggi.
Il rimbalzo e la camera
La frenata è una molla: quando la cabina finisce un viaggio riceve una spinta nel verso in cui andava e una molla poco smorzata la riporta al piano, quindi va oltre e torna due o tre volte; alla partenza una spinta piccola al contrario la fa abbassare un attimo. La camera (un translate sul gruppo del mondo) segue la cabina senza il rimbalzo e con un po’ di ritardo, così il rimbalzo si vede; le nuvole si muovono a un terzo della velocità. Cavi, contrappeso e ruota si calcolano dalla stessa posizione: il contrappeso scende di quanto la cabina sale.
Il passeggero
La velocità della cabina si misura fotogramma per fotogramma e da lì l’accelerazione, ammorbidita. Il passeggero è un’altra molla spinta da quell’accelerazione: quando la cabina accelera in su lui resta indietro e si schiaccia (scale sull’asse verticale con l’origine nei piedi), quando frena si allunga. Le braccia si aprono quanto è forte la spinta e la borsa sobbalza un poco di più. SWAY dice quanto reagisce.
I piani che si accendono
Ogni scena ha due timeline: un’entrata e un giro con dentro le ripetizioni infinite (schermi, sacco, scala, gocce, bandiera). Quando le porte di un piano sono aperte più di metà, il velo scuro sulla stanza si spegne con uno sfarfallio, l’entrata parte e il giro riprende con il timeScale che sale da zero; quando la cabina riparte l’entrata torna indietro più veloce e il giro rallenta fino a fermarsi. Numeri, testo e pulsantiera seguono il piano più vicino; le lettere del titolo saltano dentro parola per parola.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
FLOORS | script.js | 5 | Quanti piani sopra l’atrio, da 2 a 5: l’ultimo è sempre la terrazza sul tetto, gli altri sono uffici, palestra, biblioteca e giardino, in quest’ordine. |
BOUNCE | script.js | 1 | Quanto la cabina va oltre il piano e rimbalza quando frena (0 = si ferma secca). |
SPEED | script.js | 1 | Quanto corre la cabina: con 2 basta metà dello scroll per salire di un piano, con 0.5 ne serve il doppio. |
SWAY | script.js | 1 | Quanto il passeggero si abbassa e si allunga alle partenze e alle frenate (0 = sta fermo come una statua). |
LIVELY | script.js | 1 | La velocità delle scenette dei piani una volta accese: 2 è il doppio, 0.5 la metà. |
Quando usarla
Per raccontare un edificio o un’offerta a livelli un piano alla volta: il sito di un coworking, di un hotel, di un ufficio nuovo, di un centro sportivo, un’agenzia che presenta i suoi reparti, un prodotto con più fasce di prezzo, una pagina «chi siamo» divisa per squadre.
Sul telefono
La stessa animazione con le misure adattate: il palazzo sta sopra e il testo sotto, le stanze sono più strette e mostrano la parte vicina all’ascensore (le finestre sul fondo restano solo sul computer), la pulsantiera è più piccola.
Con il movimento ridotto
Niente viaggio e niente scorrimento morbido: il palazzo sfuma, ricompare con la cabina già al piano nuovo e le porte si aprono in dissolvenza. Le stanze sono già allestite e si accendono con una dissolvenza, senza oggetti che si muovono; il passeggero sta fermo e il testo cambia in dissolvenza.
Trappole
- La frenata fatta solo con l’ease dello scroll si fermava a metà se si smetteva di scorrere, e con lo scroll veloce non si vedeva: il rimbalzo è una molla a tempo, che parte quando la cabina arriva e si assesta da sola qualunque sia lo scroll.
- La bandiera abbassata in fondo all’asta, a piano spento, sembrava un rettangolo rosa appoggiato dietro la ringhiera: da spenta è anche arrotolata (scaleX piccolo) e si srotola mentre sale.
- Il titolo diviso in lettere inline-block andava a capo in mezzo alle parole («floo / r»): le lettere stanno dentro uno span per parola con white-space: nowrap.
- Con lo scroll veloce il numero grande cambiava più volte prima che finisse l’animazione e restava indietro di un piano: a ogni cambio si mandano via tutti i numeri vecchi, non solo il primo.
- Le scene con le ripetizioni infinite consumano anche quando non si vedono: il giro di ogni piano è in pausa finché le sue porte non si aprono e rallenta fino a zero quando la cabina riparte.
- Per far girare un oggetto già ruotato con l’attributo transform (le foglie) GSAP rilegge la matrice e perde il perno: la rotazione fissa sta su un gruppo e GSAP anima il gruppo dentro, con svgOrigin.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Bricolage Grotesque (font variabile) 5.3.0, DM Mono 5.3.0.
Compressi con gzip, i tre file della demo pesano 21 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 10 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.
