Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The photo booth on scroll
Scroll inside the preview
The header of a made-up photo booth hire, in the rich style: as you scroll, a coin drops into the slot of a vintage booth in teal enamel and chrome, the red velvet curtain slides on its rings and a silhouette sits down on the stool; in front of four coloured backdrops it holds up four props on sticks one after the other, the sunglasses, the moustache, the party hat and the crown, and the flash fires for every pose. Then the strip of four photos is pushed out of the slot in jerks, develops from brown to colour and hangs on a peg to dry next to the title, with confetti.
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 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
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.
29 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 photo booth on scroll” from Animorio and fit it into my siteWhat it does
Against a mustard wall with a lamp, its cone of light and an old poster, on a checkered floor, stands the Flashbox booth: teal enamel with grain and a few scratches, chrome trim with rivets, the side in perspective with its vents, the navy sign with PHOTOS lit up, a window with two sample strips, the coin plate with its screws, the price sticker, the photo slot, the grille and the cream band with the brand. In front a red doormat, next to it a wooden crate with the feather boa and the props, behind it the cable to the socket. As you scroll, the coin floating in the air arcs over and disappears edge on into the slot; the pleated velvet curtain slides left on its rings and keeps swaying, with the tassel swinging; inside you see the striped backdrop, the red stool and the instruction card, and a dark silhouette sits down on the stool and breathes slowly. At every pose the backdrop changes colour (pink, light blue, mint, lilac) and a prop on a stick rises in front of the silhouette, which tilts its head a little, and stays there until the next pose: sunglasses, moustache, party hat, crown. When the scroll passes the pose the flash fires: a short burst on the rim of the opening and on the curtain, the sign glowing, the prop giving a little jump and the boa jolting. Then the strip of four photos is pushed out of the slot in jerks, pulled out, develops one photo at a time from brown to colour and hangs on a peg on a line, swinging; the booth steps aside, Strike a pose., the line and the Book the booth button arrive, and confetti falls. Top right the name of the moment changes with a jump. Scroll back up and it runs backwards to the coin.
How it works
One number, how far along we are
The scroll scrubs a plain object from 0 to 1, and that number drives the coin, the curtain opening, which prop is up and how high, the strip coming out, each photo developing and where the booth stands at the end. So scrolling back runs it all backwards. Time only moves what lives on its own: the flash, the curtain’s sway, the tassel, the props’ trembling, the swinging strip, the boa and the confetti.
The pleated curtain
The curtain is nine pleats, each a path with curved sides and a velvet gradient, dark in the folds and light on the ridge. As it opens the right edge moves left and the pleats squeeze together; the speed of the opening charges a wave that slowly dies down, and each pleat follows it with its own phase. The tassel follows the edge and swings.
The flash that fires as you pass
Each pose has its point on the scroll: when you pass it going forward, a small timeline lights a white rim around the opening and brightens the curtain in four hundredths, and fades them in just over two tenths, so the backdrop and the prop always stay readable; meanwhile the sign glows, the prop jumps with back.out and the boa jolts. Going back, the flash does not fire.
The strip that develops
The strip sits inside the booth, cut by a clipPath below the slot, and comes down in jerks; then the clipping goes and the strip moves to its place next to the title, bigger, hanging by its top corner. Each photo has a brown veil that fades, one photo after the other.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'Flashbox' | The hire company’s name in the header, on the booth and on the strip. |
SIGN | script.js | 'PHOTOS' | The word on the lit sign on top of the booth. |
SCREENS | script.js | 5 | How long the visit to the booth lasts, in screens of scroll. |
FLASH | script.js | 1 | How strong the flash is at every pose (0 = no flash). |
SWAY | script.js | 1 | How much the curtain, the tassel, the boa and the strip swing. |
CONFETTI | script.js | 1 | How much confetti falls when the strip is ready, from 0 to 2. |
When to use it
For the header of a photo booth hire or an event photographer, a wedding or party agency, a venue with a vintage booth, a festival; and for any page that tells a moment in several beats, from before to after, ending on a keepsake to take home.
On phones
The same animation with the sizes adapted: the drawing takes the shape of the box and the booth is sized on the height; on a narrow screen at the end the booth moves left and gets smaller, the hanging strip sits to its right and the title with the button goes top centre, without the line and the label. The words are measured on the height too.
With reduced motion
No continuous motion, no flash, no sway, no confetti and no smooth scroll: the visit is split into still moments (the curtain closed, the curtain open, the four poses, the strip coming out, the strip hanging with the title). As you scroll, the scene fades and comes back already at the next moment.
Pitfalls
- The flash must fire only when passing the pose going forward: keep the number of the last pose taken and lower it when scrolling back, or scrolling up and down a little makes it flash all the time.
- The strip inside the slot must be cut with a clipPath, and the clipping removed as soon as it is pulled out, or it vanishes halfway to the title.
- The whole drawing is rebuilt on resize, because it takes the shape of the box: the floor, the lamp and the poster are sized on the width and the booth on the height.
- Colour variables do not work in SVG fill attributes: they go in style, so the Playground’s Palette can recolour them.
Libraries
GSAP 3.15.0, Lenis 1.3.26, Bricolage Grotesque (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 16 KB; the libraries: GSAP + ScrollTrigger 45 KB, Lenis 5.3 KB.
Testing
Tested on 23 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.
