Parole che si fondono
Testo, Scroll, SVG
NuovaGratis
Torna alla libreria
L’autolavaggio allo scroll
Scorri dentro l’anteprima
L’intestazione di un autolavaggio inventato, nello stile ricco: scendendo, una berlina rossa sporca di fango entra nel tunnel sul nastro trasportatore, i getti a ventaglio la bagnano e il fango cola via, la schiuma tripla rosa, bianca e azzurra le piove addosso a nastri e la copre di un manto morbido, la spazzola di microfibra gira e si apre contro la fiancata, il rullo segue il tetto, la tenda del risciacquo porta via la schiuma a pezzi, i soffiatori spingono indietro le gocce; esce al sole lucida, con un riflesso che le corre addosso, e arrivano il titolo e il pulsante.
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 car wash on scroll</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up car wash, Sudsy. The stage sticks while you scroll: a muddy car rolls in and goes through the tunnel,
pre-soak jets, a waterfall of foam, the spinning brushes, the rinse curtain and the air dryer, then it rolls out
shining. Car, tunnel, brushes, water and foam are SVG drawn by the script -->
<main>
<section class="lavaggio" data-lavaggio>
<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"><path d="M16 3C11 11 7 15.5 7 20a9 9 0 0 0 18 0c0-4.5-4-9-9-17Z"/><path class="marchio__lucido" d="M12 20.5a4 4 0 0 0 4 4"/></svg>
Sudsy
</p>
<p class="sotto">Car wash & detailing</p>
</header>
<div class="fasi" data-fasi>
<p class="fase" data-fase="in"><svg class="fase__icona" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 15h18M5 15l2-5h10l2 5M7 18a1.6 1.6 0 1 0 0 .1M17 18a1.6 1.6 0 1 0 0 .1"/></svg><span class="fase__nome">Drive in</span><span class="fase__nota">Mud, dust and a long week</span></p>
<p class="fase" data-fase="jets"><svg class="fase__icona" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3C8.5 8 7 10.5 7 13a5 5 0 0 0 10 0c0-2.5-1.5-5-5-10Z"/></svg><span class="fase__nome">Pre-soak</span><span class="fase__nota">Warm jets loosen the dirt</span></p>
<p class="fase" data-fase="foam"><svg class="fase__icona" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 17a3.5 3.5 0 0 1 .5-7 4.5 4.5 0 0 1 8.5-1.5 3.5 3.5 0 0 1 5 4.5 2.5 2.5 0 0 1-1 4Z"/></svg><span class="fase__nome">Snow foam</span><span class="fase__nota">Pink, thick and pH neutral</span></p>
<p class="fase" data-fase="brush"><svg class="fase__icona" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 3h4v5h-4ZM6 8h12v3H6ZM7 11v9M10 11v10M14 11v10M17 11v9"/></svg><span class="fase__nome">Soft brushes</span><span class="fase__nota">Microfibre, never bristles</span></p>
<p class="fase" data-fase="rinse"><svg class="fase__icona" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16M6 4v13M10 4v16M14 4v12M18 4v15"/></svg><span class="fase__nome">Spot-free rinse</span><span class="fase__nota">Filtered water, no streaks</span></p>
<p class="fase" data-fase="dry"><svg class="fase__icona" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 9h11a3 3 0 1 0-3-3M3 13h15a3 3 0 1 1-3 3M3 17h7"/></svg><span class="fase__nome">Air dry</span><span class="fase__nota">Two blowers, no towels</span></p>
</div>
<div class="finale" data-finale>
<h1 class="finale__titolo">Clean in five minutes.</h1>
<p class="finale__testo">Drive-through wash, open every day from seven to ten.</p>
<a class="tasto" href="#" data-tasto><span>Book a wash</span></a>
</div>
<p class="cenno" data-cenno>
Scroll to wash
<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">Sudsy</p>
<h2 class="dopo__titolo">Three washes, one tunnel.</h2>
<p class="dopo__testo">Quick, Full and Shine. Pay at the gate, stay in the car, roll out dry.</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.
42 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’autolavaggio allo scroll» da Animorio e adattala al mio sitoCosa fa
Sotto un cielo azzurro, davanti ai palazzi della città, una berlina rossa con la polvere sulle soglie e gli schizzi di fango aspetta davanti al tunnel di Sudsy, con l’insegna gialla e la tenda a strisce rosa. Scendendo la macchina resta in mezzo e il tunnel le scorre addosso: le ruote girano quanto la strada fatta, dentro si accendono i fari e le luci al neon le corrono sulla carrozzeria e sui vetri, e il pavimento bagnato la riflette. Nel prelavaggio otto ugelli aprono ventagli di spruzzo con la nebbiolina, le gocce rimbalzano sul tetto e il fango cola giù a righe. Poi la schiuma tripla scende a nastri rosa, bianchi e azzurri e copre la macchina di un manto morbido, con le pieghe in ombra e le colature sulle fiancate, mentre sul pavimento se ne ammucchia altra. La spazzola di microfibra gira, le strisce si aprono e si trascinano contro la fiancata, raccolgono schiuma e la lanciano via, e la macchina affonda e dondola sulle sospensioni, con l’antenna che oscilla; il rullo scende sul tetto e ne segue il profilo, le sue strisce si accorciano dove toccano. La tenda del risciacquo porta via la schiuma a pezzi, dal muso alla coda, e restano le gocce; i soffiatori le spingono indietro e le fanno volare via. Fuori, al sole, un riflesso corre su tutta la carrozzeria e arrivano Clean in five minutes. e il pulsante Book a wash. Risalendo succede tutto al contrario, fango compreso; in basso a sinistra il nome di ogni fase cambia con un salto, col suo pittogramma.
Come funziona
Un numero solo, la strada fatta
Lo scroll muove con scrub un oggetto qualunque, da 0 a 1. Da lì si calcola una cosa sola, dove sta l’inizio del tunnel sullo schermo (T): la macchina sta ferma in mezzo e il tunnel, il pavimento e la cascata di schiuma scivolano a sinistra, i palazzi e le nuvole più lenti. Ogni stazione, in coordinate della macchina, sta a T più la sua posizione.
Ogni punto della macchina sa chi gli è passato sopra
Una funzione dice, per un punto x della macchina e una stazione, se la stazione gli è già passata sopra (da 0 a 1, con una sfumatura). Ogni macchia di fango cala quando passano i getti e la spazzola, ogni colatura si allunga sotto i getti, ogni cerchio della schiuma si gonfia sotto la cascata e scivola via sotto il risciacquo, ogni goccia scende e poi va all’indietro sotto i soffiatori. Per questo risalendo torna tutto, e la schiuma va via dal muso alla coda.
La schiuma: cerchi fusi insieme
Il manto è fatto di qualche centinaio di cerchi bianchi, rosa e azzurri dentro un gruppo con un filtro: feGaussianBlur li sfoca insieme e feColorMatrix taglia netto l’alfa (24, meno 11), così diventano una massa sola dai bordi morbidi. Lo stesso filtro sposta in su e in giù una copia sfocata e la sottrae: sotto ogni rigonfiamento resta un’ombra azzurra, sopra una luce bianca. La cascata è lo stesso trucco su bolle che nascono a ritmo fisso da sette punti e cadono: si fondono in nastri.
Spazzola, rullo e molle
La spazzola è una ventina di strisce attorno a un asse verticale: ognuna è una curva che va dal mozzo al fondo, larga quanto è girata verso di noi e ridisegnata in ordine di profondità. Dove sotto c’è la macchina, il fondo si apre e resta indietro, con un ritardo che fa da inerzia. Il rullo visto di lato è una ruota di strisce che si accorciano quando toccano il profilo del tetto. Le sospensioni e l’antenna sono due molle smorzate, spinte dalle spazzole e dagli scossoni.
Luci, riflessi e il finale
Dentro il tunnel la carrozzeria prende la tinta del tunnel, si accendono i fari col fascio sul pavimento e due serie di riflessi scorrono sulla fiancata e sui vetri insieme al tunnel. Il pavimento riflette la macchina con un use capovolto e una maschera che sfuma. Dopo l’85 per cento dello scroll un rettangolo sfumato ritagliato sulla carrozzeria la attraversa, e il titolo e il pulsante salgono in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
BRAND | script.js | 'SUDSY' | Il nome sull’insegna del tunnel (accanto c’è CAR WASH). |
SCREENS | script.js | 7 | Quanto dura il lavaggio, in schermate di scroll. |
WATER | script.js | 1 | Quanta acqua cade dai getti e dal risciacquo: 0,3 una pioggerella, 2 un acquazzone. |
FOAM | script.js | 1 | Quanto è spesso il manto di schiuma e quanto scende dalla cascata, da 0,3 a 2. |
SPIN | script.js | 1 | Quanto girano veloci la spazzola e il rullo (0 = fermi). |
BEND | script.js | 1 | Quanto si aprono e si trascinano le strisce della spazzola contro la macchina (0 = rigide). |
MUD | script.js | 1 | Quanto arriva sporca la macchina (0 = già pulita). |
BOUNCE | script.js | 1 | Quanto dondola la macchina sulle molle sotto le spazzole. |
Quando usarla
Per l’intestazione o la pagina «come funziona» di un autolavaggio, di un servizio di pulizia o di detailing per auto, di un noleggio o di un concessionario, di un’app che prenota servizi per la macchina; e per qualsiasi servizio diviso in fasi da raccontare scendendo, dal prima al dopo.
Sul telefono
La stessa animazione con le misure adattate: il disegno prende la forma della casella, alto sempre uguale e largo quanto serve, quindi su uno schermo stretto si vede meno tunnel ai lati ma la macchina, le stazioni e il finale sono interi. Le scritte si misurano anche sull’altezza; il sottotitolo della testata e l’invito a scorrere spariscono.
Con il movimento ridotto
Niente viaggio, niente acqua che cade, niente spazzole che girano e niente scorrimento morbido: il lavaggio è diviso in momenti fermi (davanti al tunnel, getti, schiuma, spazzola, risciacquo, soffiatori, fuori lucida). Scorrendo, la scena sfuma e ricompare già al momento successivo.
Trappole
- Il filtro della schiuma va su un gruppo solo, non su ogni cerchio: è la sfocatura di tutti insieme che li fonde. E va tenuto stretto (x, y, width, height del filtro) perché il browser lo ricalcola a ogni fotogramma.
- Fango, schiuma e bagnato vanno calcolati dalla strada fatta, punto per punto, non contati nel tempo: così risalendo la macchina torna sporca, e lo scrub non lascia schiuma a metà.
- Il riflesso nel pavimento è un use capovolto: la maschera va su un gruppo che lo contiene, perché messa sull’use si capovolgerebbe con lui e coprirebbe il cielo invece del pavimento.
- Le strisce della spazzola si ridisegnano in ordine di profondità a ogni fotogramma (appendChild di quelle davanti per ultime): senza, le strisce dietro passano sopra a quelle davanti.
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 21 KB; le librerie: GSAP + ScrollTrigger 45 KB, Lenis 5,3 KB.
Collaudo
Provata il 22 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.
