Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The car wash on scroll
Scroll inside the preview
The header of a made-up car wash, in the rich style: as you scroll, a muddy red saloon rolls into the tunnel on the conveyor, the fan jets soak it and the mud runs off, the pink, white and blue triple foam pours on it in ribbons and wraps it in a soft coat, the microfibre brush spins and spreads against the side, the roller rides the roof, the rinse curtain washes the foam off in pieces and the blowers push the drops back; it rolls out into the sun shining, with a gleam running along it, and the title and the button arrive.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
42 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The car wash on scroll” from Animorio and fit it into my siteWhat it does
Under a blue sky, in front of the city’s buildings, a red saloon with dust on its sills and mud splashes waits in front of Sudsy’s tunnel, with the yellow sign and the pink striped awning. As you scroll the car stays in the middle and the tunnel slides past it: the wheels turn as far as the road goes, inside the headlights come on and the neon lights run across the bodywork and the glass, and the wet floor reflects it. In the pre-soak eight nozzles open fans of spray with a light mist, the drops bounce off the roof and the mud runs down in streaks. Then the triple foam pours down in pink, white and blue ribbons and wraps the car in a soft coat, with shaded folds and drips down the sides, while more piles up on the floor. The microfibre brush spins, its strips spread and drag against the side, pick up foam and fling it away, and the car sinks and rocks on its suspension, the antenna swaying; the roller drops onto the roof and follows its line, its strips getting shorter where they touch. The rinse curtain washes the foam off in pieces, from the nose to the tail, and the drops are left; the blowers push them back and send them flying. Outside, in the sun, a gleam runs along the whole body and Clean in five minutes. and the Book a wash button arrive. Scroll back up and it all happens backwards, mud included; bottom left, the name of each step changes with a jump, with its pictogram.
How it works
One number, the distance travelled
The scroll scrubs a plain object from 0 to 1. From it comes a single thing, where the start of the tunnel is on screen (T): the car stays still in the middle and the tunnel, the floor and the foam waterfall slide left, the buildings and the clouds more slowly. Each station, in car coordinates, sits at T plus its position.
Each point of the car knows what has passed over it
A function says, for a point x of the car and a station, whether the station has already passed over it (0 to 1, with a soft edge). Each mud splash fades as the jets and the brush pass, each streak grows under the jets, each foam circle swells under the waterfall and slides off under the rinse, each drop runs down and then goes backwards under the blowers. That is why scrolling back brings it all back, and the foam goes from the nose to the tail.
The foam: circles melted together
The coat is a few hundred white, pink and blue circles in a group with a filter: feGaussianBlur blurs them together and feColorMatrix cuts the alpha sharply (24, minus 11), so they become one mass with soft edges. The same filter shifts a blurred copy up and down and subtracts it: under every bulge a blue shadow is left, on top a white light. The waterfall is the same trick on blobs born at a steady pace from seven points as they fall: they melt into ribbons.
Brush, roller and springs
The brush is about twenty strips round a vertical axis: each one is a curve from the hub to the bottom, as wide as it is turned towards us, redrawn in depth order. Where the car is underneath, the bottom spreads and trails back, with a lag that works as inertia. Seen from the side the roller is a wheel of strips that get shorter when they touch the roof line. The suspension and the antenna are two damped springs, pushed by the brushes and the jolts.
Lights, reflections and the finish
Inside the tunnel the bodywork takes the tunnel’s tint, the headlights come on with their beam on the floor and two sets of reflections slide along the side and the glass with the tunnel. The floor reflects the car with a flipped use and a fading mask. After 85 per cent of the scroll a gradient rectangle clipped to the bodywork crosses it, and the title and the button fade up.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'SUDSY' | The name on the tunnel’s sign (CAR WASH goes next to it). |
SCREENS | script.js | 7 | How long the wash lasts, in screens of scroll. |
WATER | script.js | 1 | How much water falls from the jets and the rinse: 0.3 a drizzle, 2 a downpour. |
FOAM | script.js | 1 | How thick the foam coat is and how much pours from the waterfall, from 0.3 to 2. |
SPIN | script.js | 1 | How fast the brush and the roller spin (0 = still). |
BEND | script.js | 1 | How much the brush strips spread and drag against the car (0 = stiff). |
MUD | script.js | 1 | How muddy the car arrives (0 = clean already). |
BOUNCE | script.js | 1 | How much the car rocks on its springs under the brushes. |
When to use it
For the header or the “how it works” page of a car wash, a cleaning or car detailing service, a rental or a dealership, an app that books services for your car; and for any service split into steps to tell as you scroll, from before to after.
On phones
The same animation with the sizes adapted: the drawing takes the shape of the box, always the same height and as wide as needed, so on a narrow screen you see less tunnel at the sides but the car, the stations and the finish are whole. The words are measured on the height too; the header’s subtitle and the scroll hint go.
With reduced motion
No journey, no falling water, no spinning brushes and no smooth scroll: the wash is split into still moments (in front of the tunnel, jets, foam, brush, rinse, blowers, out and shining). As you scroll, the scene fades and comes back already at the next moment.
Pitfalls
- The foam filter goes on one group, not on each circle: it is blurring them all together that melts them. And keep it tight (the filter’s x, y, width, height) because the browser recomputes it every frame.
- Mud, foam and wet must come from the distance travelled, point by point, not counted over time: that way scrolling back makes the car dirty again, and the scrub never leaves foam halfway.
- The reflection in the floor is a flipped use: the mask goes on a group around it, because on the use itself it would flip with it and cover the sky instead of the floor.
- The brush strips are redrawn in depth order every frame (appendChild of the front ones last): otherwise the back strips pass over the front ones.
Libraries
GSAP 3.15.0, Lenis 1.3.26, Bricolage Grotesque (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 21 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.
Testing
Tested on 22 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
