Il titolo che si alza dalla linea
Transizioni, Testo, Immagini
NuovaGratis
Torna alla libreria
La striscia di stanze che si apre
Il caricamento di uno studio d’interni: quattordici stanzine in due file sfalsate si uniscono in una striscia, la striscia si ripiega a coppie nel quadratino al centro, e quel quadratino diventa la stanza che riempie lo schermo.
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 strip of rooms that opens</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/instrument-serif@5.3.0/400-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-condensed@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- the opening of a made-up interior studio. Fourteen small rooms in two staggered rows meet in a single strip, the
strip folds into the square in the middle, and that square grows into the room that fills the screen -->
<header class="testata" data-testata>
<button class="testata__voce" type="button">Menu</button>
<p class="marchio">
<svg class="marchio__segno" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 2h12v4H4zM2 8h16v4H2zM4 14h12v4H4z" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
<span>LUMBRE</span>
</p>
<button class="testata__voce testata__voce--bordo" type="button">Book a visit</button>
</header>
<div class="velo" data-velo aria-hidden="true"></div>
<main class="eroe">
<figure class="eroe__stanza" data-eroe><div class="eroe__quadro" data-quadro></div></figure>
<div class="eroe__testi" data-eroe-testi>
<p class="eroe__motto">Plan <i>×</i> Light <i>×</i> Build</p>
<h1 class="eroe__titolo" data-eroe-titolo>Every room is<br>one long sentence.</h1>
</div>
</main>
<div class="caricamento" data-caricamento aria-hidden="true">
<p class="marchio caricamento__marchio" data-marchio>
<svg class="marchio__segno" viewBox="0 0 20 20" aria-hidden="true"><path d="M4 2h12v4H4zM2 8h16v4H2zM4 14h12v4H4z" fill="none" stroke="currentColor" stroke-width="1.4"/></svg>
<span>LUMBRE</span>
</p>
<p class="caricamento__motto" data-motto>Plan <i>×</i> Light <i>×</i> Build</p>
<div class="striscia" data-striscia></div>
<div class="caricamento__testi">
<p class="caricamento__titolo" data-titolo>Rooms that read as one.</p>
<p class="caricamento__sotto" data-sotto>Homes planned, lit and built as a single whole.</p>
</div>
</div>
<button class="ancora" type="button" data-ancora>Play it again</button>
<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/SplitText.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.
46 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 striscia di stanze che si apre» da Animorio e adattala al mio sitoCosa fa
L’apertura di Lumbre, uno studio d’interni inventato. Su un fondo color crema a bande verticali morbide ci sono il marchio, una riga in corsivo che si scrive da sinistra e, al centro, quattordici stanzine disegnate, sette sopra e sette sotto come le caselle di una scacchiera. Intanto sotto sale, lettera per lettera, la frase «Rooms that read as one.». Dopo un secondo le due file scorrono una verso l’altra e diventano una striscia sola; poi la striscia si ripiega verso il centro, a coppie, dalle due stanze più esterne alle più vicine, e le prime due coppie svaniscono strada facendo. La frase se ne va dall’ultima lettera. Resta il quadratino in mezzo: si apre in un quadro orizzontale, la stanza dentro si avvicina un poco, il fondo crema sparisce e il quadro si allarga fino a riempire lo schermo. Sopra sale il titolo della pagina e torna la testata. Dopo qualche secondo si ricomincia, oppure si preme «Play it again».
Come funziona
Quindici caselle
Il passo fra una stanzina e l’altra è SLOT centesimi della larghezza dello schermo e ogni stanzina ne è larga TILE: sono quindici caselle in fila, e quella di mezzo non è una stanzina ma la stanza della pagina, già al suo posto e piccola. Le altre si mettono a destra e a sinistra con x, una sì e una no un poco più in alto o più in basso di SPLIT, così sembrano due file sfalsate.
Le file e la piega
Dopo DELAY secondi le due file vanno a y: 0 in ROWS_TIME secondi con power2.out, la seconda sette centesimi dopo. A FOLD_AT parte la piega: ogni stanzina va a x: 0, cioè sopra la casella di mezzo, in FOLD_TIME secondi, una ogni FOLD_STAGGER a cominciare dalla coppia più esterna; le prime FADE_PAIRS coppie intanto svaniscono. La stanza della pagina sta sopra le altre, quindi le stanzine le scivolano sotto.
La stanza che si apre
A 1,9 secondi le stanzine svaniscono in un quarto di secondo e il fondo crema se ne va. La stanza della pagina passa dal quadratino a un quadro di OPEN_W per OPEN_H centesimi della larghezza in 0,77 secondi; il disegno dentro si avvicina fino a ZOOM in 1,55 secondi; a 2,68 il quadro diventa grande come lo schermo in 0,76 secondi. Il disegno è un SVG con preserveAspectRatio a slice: allargandosi il riquadro, se ne vede di più.
Le lettere
SplitText divide la frase del caricamento in lettere e il sottotitolo in parole. Salgono subito, dal 20% della loro altezza e trasparenti, in 1,5 secondi con power2.out, una ogni CHAR_STAGGER; a 1,53 se ne vanno al contrario, dall’ultima, in 0,7 secondi. A 2,76 sale nello stesso modo il titolo della pagina, e a 3,76 torna la testata.
Al telefono e da capo
Sotto i 768 pixel valgono i numeri di PHONE: stanzine da 12 centesimi, tre coppie, file a 6,25, il quadro di 60 per 45 e la stanza che si avvicina appena; nessuna attesa all’inizio e curve power2.inOut, un poco più lente. Finita l’apertura, dopo HOLD secondi un gsap.delayedCall la rifà da capo; al cambio di larghezza dello schermo si rifà tutto con le misure nuove.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DELAY | script.js | 1 | I secondi prima che la striscia si muova (nel sito 1). |
TILE | script.js | 4 | Il lato di ogni stanzina, in centesimi della larghezza (nel sito 4). |
SLOT | script.js | 4.4 | Il passo fra una stanzina e l’altra (nel sito 4,4). |
SPLIT | script.js | 2.2 | Quanto ogni fila parte lontana dalla riga di mezzo (nel sito 2,2). |
FOLD_AT | script.js | 1.05 | Quando parte la piega, in secondi (nel sito 1,05). |
FOLD_STAGGER | script.js | 0.02 | Lo stacco fra una stanzina e l’altra nella piega (nel sito 0,02). |
OPEN_W | script.js | 42 | La larghezza del quadro dopo il primo passo (nel sito 42 per 28). |
ZOOM | script.js | 1.25 | Quanto si avvicina la stanza nel quadro (nel sito 1,25). |
HOLD | script.js | 2.6 | I secondi di pausa prima di ricominciare; 0 per una volta sola. |
Quando usarla
Per l’apertura del sito di uno studio, di un fotografo, di un albergo o di un’agenzia immobiliare: chi ha tante immagini e una che le riassume. Una volta per visita, sulla home.
Sul telefono
Uguale, con le misure del sito per il telefono: tre coppie di stanzine più grandi, file più distanti, il quadro di 60 per 45 e passi un poco più lenti, senza attesa all’inizio.
Con il movimento ridotto
La pagina è già aperta: niente striscia, la stanza riempie lo schermo e il titolo e la testata compaiono in dissolvenza.
Trappole
- La stanza della pagina deve stare sopra le stanzine, non sotto: le stanzine piegate le finiscono addosso tutte insieme, e se stessero sopra coprirebbero l’apertura del quadro.
- Le misure in centesimi dello schermo vanno trasformate in pixel prima di passarle a GSAP e rifatte quando cambia la larghezza: x accetta i vw, ma width e height dei pezzi che crescono vanno calcolati.
- SplitText va lanciato dopo document.fonts.ready: con il carattere di riserva le lettere si dividono in punti sbagliati e restano spostate quando arriva quello vero.
- Il disegno della stanza va pensato per lo schermo alto del telefono: con slice si vede solo una fetta in mezzo, quindi divano, lampada e finestra devono stare vicino al centro.
Librerie
GSAP 3.15.0, SplitText (GSAP) 3.15.0, Instrument Serif 5.3.0, Roboto Condensed (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,1 KB; le librerie: GSAP + SplitText 31 KB.
Collaudo
Provata il 8 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.
