Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
La cabina delle foto allo scroll
Scorri dentro l’anteprima
L’intestazione di un noleggio di cabine per le foto inventato, nello stile ricco: scendendo, una moneta cade nella fessura di una cabina d’epoca di smalto verde acqua e cromo, la tenda di velluto rosso scorre sui suoi anelli e una sagoma si siede sullo sgabello; davanti a quattro fondali colorati alza uno dopo l’altro quattro oggetti di scena sul bastoncino, gli occhiali da sole, i baffi, il cappellino da festa e la corona, e il flash scatta per ogni posa. Poi la striscia delle quattro foto esce dalla fessura a scatti, si sviluppa dal marrone ai colori e resta appesa a una molletta ad asciugare accanto al titolo, con i coriandoli.
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 photo booth on scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up photo booth hire, Flashbox. The stage sticks while you scroll: a coin drops in the slot, the velvet
curtain slides open, four props on sticks pop up one after the other and the flash fires for each, then the
strip of four photos slides out of the side slot, develops from brown to colour and swings dry next to the
title. Everything is SVG drawn by the script -->
<main>
<section class="giro" data-giro>
<div class="palco" data-palco>
<svg class="scena" data-scena aria-hidden="true"></svg>
<header class="testata">
<p class="marchio">
<svg viewBox="0 0 32 32" aria-hidden="true">
<rect class="marchio__corpo" x="5" y="9" width="22" height="17" rx="4"/>
<rect class="marchio__lampo" x="9" y="5" width="8" height="5" rx="1.5"/>
<circle class="marchio__lente" cx="16" cy="17.5" r="5.2"/>
<circle class="marchio__riflesso" cx="14.2" cy="15.8" r="1.5"/>
</svg>
<span data-brand>Flashbox</span>
</p>
<p class="stato" data-stato><span class="stato__nome" data-stato-nome>Insert a coin</span><span class="stato__nota" data-stato-nota>Four poses, one strip</span></p>
</header>
<div class="finale" data-finale>
<p class="finale__sopra">Photo booth hire</p>
<h1 class="finale__titolo">Strike <em>a pose.</em></h1>
<p class="finale__testo">A vintage booth for weddings and parties, with a prop box and strips printed on the spot.</p>
<a class="tasto" href="#" data-tasto><span>Book the booth</span></a>
</div>
<p class="cenno" data-cenno>
Scroll to take your photos
<svg viewBox="0 0 24 32" aria-hidden="true"><path d="M12 3V27M4 19L12 28L20 19" /></svg>
</p>
</div>
</section>
<section class="dopo">
<p class="dopo__marchio">Flashbox</p>
<h2 class="dopo__titolo">One booth, a box of props, every guest on a strip.</h2>
<p class="dopo__testo">We bring it, set it up in an hour and leave you a guest book with a copy of every strip.</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="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.
29 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 cabina delle foto allo scroll» da Animorio e adattala al mio sitoCosa fa
Contro un muro giallo senape con la lampada, il suo cono di luce e un vecchio manifesto, su un pavimento a scacchi, sta la cabina di Flashbox: smalto verde acqua con la grana e qualche graffio, profili di cromo coi rivetti, il fianco in prospettiva con le feritoie, l’insegna blu notte con la scritta PHOTOS illuminata, una vetrina con due strisce d’esempio, la gettoniera con le viti, il bollino del prezzo, la fessura delle foto, la griglia e la fascia crema col marchio. Davanti uno zerbino rosso, accanto una cassetta di legno con il boa di piume e gli oggetti di scena, dietro il cavo che va alla presa. Scendendo, la moneta che galleggiava in aria fa un arco e sparisce di taglio nella fessura; la tenda di velluto, a pieghe, scorre a sinistra sui suoi anelli e continua a ondeggiare, con la nappa che dondola; dentro si vedono il fondale a righe, lo sgabello rosso e il foglio delle istruzioni, e una sagoma scura si siede sullo sgabello e respira piano. A ogni posa il fondale cambia colore (rosa, azzurro, menta, lilla), un oggetto sul bastoncino sale davanti alla sagoma, che piega un poco la testa, e resta lì fino alla posa dopo: occhiali da sole, baffi, cappellino da festa, corona. Quando lo scroll passa la posa scatta il flash: un lampo breve sul bordo dell’apertura e sulla tenda, l’insegna che brilla, l’oggetto che fa un saltino e il boa che sobbalza. Poi la striscia delle quattro foto esce dalla fessura a scatti, viene tirata fuori, si sviluppa una foto alla volta dal marrone ai colori e resta appesa a una molletta su un filo, dondolando; la cabina si sposta, arrivano Strike a pose., la riga e il pulsante Book the booth, e cadono i coriandoli. In alto a destra il nome del momento cambia con un salto. Risalendo si torna indietro fino alla moneta.
Come funziona
Un numero solo, a che punto siamo
Lo scroll muove con scrub un oggetto qualunque, da 0 a 1, e da quel numero vengono la moneta, l’apertura della tenda, quale oggetto è su e quanto, l’uscita della striscia, lo sviluppo di ogni foto e il posto della cabina alla fine. Così risalendo tutto torna indietro. Il tempo muove solo quello che vive da solo: il flash, l’ondeggiare della tenda, la nappa, il tremolio degli oggetti, la striscia che dondola, il boa e i coriandoli.
La tenda a pieghe
La tenda è fatta di nove pieghe, ognuna un tracciato con i fianchi curvi e una sfumatura di velluto, scuro nei solchi e chiaro sul dorso. Aprendola, il bordo destro va verso sinistra e le pieghe si stringono; la velocità dell’apertura carica un’onda che poi si spegne piano, e ogni piega la segue con la sua fase. La nappa segue il bordo e dondola.
Il flash che scatta passando
Ogni posa ha il suo punto dello scroll: quando lo si passa andando avanti, una piccola timeline accende in quattro centesimi un bordo bianco attorno all’apertura e schiarisce la tenda, e li spegne in poco più di due decimi, così il fondale e l’oggetto restano sempre leggibili; intanto l’insegna brilla, l’oggetto fa un saltino con back.out e il boa sobbalza. Tornando indietro il flash non scatta.
La striscia che si sviluppa
La striscia sta dentro la cabina, tagliata da un clipPath sotto la fessura, e scende a scatti; poi il ritaglio si toglie e la striscia va al suo posto accanto al titolo, più grande, appesa per l’angolo in alto. Su ogni foto c’è un velo marrone che si spegne, una foto dopo l’altra.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'Flashbox' | Il nome del noleggio nella testata, sulla cabina e sulla striscia. |
SIGN | script.js | 'PHOTOS' | La parola sull’insegna illuminata in cima alla cabina. |
SCREENS | script.js | 5 | Quanto dura la visita alla cabina, in schermate di scroll. |
FLASH | script.js | 1 | Quanto è forte il flash a ogni posa (0 = niente flash). |
SWAY | script.js | 1 | Quanto ondeggiano la tenda, la nappa, il boa e la striscia. |
CONFETTI | script.js | 1 | Quanti coriandoli cadono quando la striscia è pronta, da 0 a 2. |
Quando usarla
Per l’intestazione di un noleggio di cabine per le foto o di un fotografo di eventi, di un’agenzia di matrimoni o di feste, di un locale con la cabina d’epoca, di un festival; e per qualsiasi pagina che racconta un momento in più tempi, dal prima al dopo, finendo su un ricordo da portare via.
Sul telefono
La stessa animazione con le misure adattate: il disegno prende la forma della casella e la cabina si misura sull’altezza; su uno schermo stretto alla fine la cabina va a sinistra e più piccola, la striscia appesa sta alla sua destra e il titolo col pulsante va in alto al centro, senza la riga e l’etichetta. Le scritte si misurano anche sull’altezza.
Con il movimento ridotto
Niente movimento continuo, niente flash, niente ondeggiare, niente coriandoli e niente scorrimento morbido: la visita è divisa in momenti fermi (la tenda chiusa, la tenda aperta, le quattro pose, la striscia che esce, la striscia appesa col titolo). Scorrendo, la scena sfuma e ricompare già al momento successivo.
Trappole
- Il flash deve scattare solo passando la posa andando avanti: si tiene il numero dell’ultima posa scattata e lo si abbassa quando si torna indietro, se no risalendo e riscendendo di poco lampeggia di continuo.
- La striscia dentro la fessura va tagliata con un clipPath, e il taglio va tolto appena la si tira fuori, se no sparisce a metà strada verso il titolo.
- Tutto il disegno si rifà al resize, perché prende la forma della casella: il pavimento, la lampada e il manifesto si misurano sulla larghezza e la cabina sull’altezza.
- Le variabili dei colori non funzionano negli attributi fill dell’SVG: vanno scritte in style, così la Palette del Playground li ricolora.
Librerie
GSAP 3.15.0, Lenis 1.3.26, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 16 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 23 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.
