Blinds over images
Images, Scroll
NewFree
Back to the library
The painting gallery hung on scroll
Scroll inside the preview
The header of a made-up art gallery, in the rich style: as you scroll, five paintings are hung one after the other on a still empty green wall, each with its own frame and technique. The brass hook slides along the rail, the painting rises on its two steel wires, swings and settles, its label slides in next to it and the spotlight clicks on with a flicker. The ladder follows the painting being hung; at the end the room dims its lights, the wall steps back and the opening night arrives.
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 painting gallery hung 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="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- a made-up art gallery, Halle Nord. The stage sticks while you scroll: on an empty green wall the paintings are
hung one after the other from the brass picture rail, each lowered on its two steel wires, swinging and
settling; its label slides in and its spotlight clicks on. A step ladder follows the work being hung. At the
end the wall steps back and the opening night arrives. 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__cornice" x="5" y="7" width="22" height="18" rx="1.5"/>
<path class="marchio__filo" d="M16 2L7 8M16 2L25 8"/>
<circle class="marchio__sole" cx="20.5" cy="12.5" r="2.6"/>
<path class="marchio__colle" d="M7 23L13 15L18 20L21 17L25 23Z"/>
</svg>
<span data-brand>Halle Nord</span>
</p>
<p class="stato" data-stato><span class="stato__nome" data-stato-nome>An empty wall</span><span class="stato__nota" data-stato-nota>Winter show</span></p>
</header>
<div class="finale" data-finale>
<p class="finale__sopra" data-show>Winter show</p>
<h1 class="finale__titolo">Opening <em>Friday.</em></h1>
<p class="finale__testo">Five painters, one green wall. Doors open at seven, the bench is yours.</p>
<a class="tasto" href="#" data-tasto><span>Plan your visit</span></a>
</div>
<p class="cenno" data-cenno>
Scroll to hang the show
<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" data-brand2>Halle Nord</p>
<h2 class="dopo__titolo">A small gallery that rehangs its wall every season.</h2>
<p class="dopo__testo">Free entry, late opening on Fridays, coffee in the courtyard.</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.
30 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 painting gallery hung on scroll” from Animorio and fit it into my siteWhat it does
A room at Halle Nord: the green wall with brushstroke plaster and a shade low down, the skirting, the oak parquet planks, the brass picture rail with its brackets up top and, above it, the black spotlights still off. As you scroll, five paintings are hung one at a time: Paper Suns (cut paper in an oak frame), Low Hills (oil on linen in a gold frame with beads), Three Circles (a screen print with a mat and the reflection of the glass), Blue Vase (oil on board in a black frame) and North Sail (gouache in a walnut frame). For each one the brass hook slides along the rail to its place, the painting rises from below on its two steel wires, lands with a small bounce and swings on its spring until it settles, with its shadow on the wall following; then the label with the title and technique slides in underneath, the spotlight turns, clicks on with a flicker and opens a cone of warm light with a pool on the wall and dust floating inside. A ladder with an orange paint pot follows the painting being hung and leaves at the end. Then the room dims its lights and only the spotlights stay on, the wall steps back with the leather bench in front, and Winter show, Opening Friday., the line and the Plan your visit button arrive. Run a finger or the mouse over the hung paintings and they swing. Top right the name of the moment changes with a jump. Scroll back up and it runs backwards to the empty wall.
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 hook, each painting rising, the label, the spotlight, where the ladder stands and the wall stepping back at the end. So scrolling back runs it all backwards. Time only moves what lives on its own: the swinging on the spring, the flickering spotlights and the dust in the cones.
The painting on a spring
Each painting has an angle and a speed: when it reaches the top it gets a push, then every frame the acceleration is minus thirty times the angle minus a little of the speed, and the painting swings less and less until it stops. The two wires go from the hook to the corners and are recalculated at every step, the shadow follows with a delay.
The spotlight clicking on
Each spotlight has its point on the scroll: when you pass it a small timeline makes the light flicker twice before it stays on; the cone is a path with a linear gradient from warm white to transparent, the pool on the wall a blurred ellipse.
How many paintings fit
The wall counts the paintings on the width: five on a computer, four on a medium screen, three on a phone, chosen so that Paper Suns, Low Hills and Blue Vase always stay. The frames are sized on the height too.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
BRAND | script.js | 'Halle Nord' | The gallery’s name in the header and at the bottom of the page. |
SHOW | script.js | 'Winter show' | The name of the show, top right and above the final title. |
SCREENS | script.js | 6 | How long the hanging lasts, in screens of scroll. |
SWAY | script.js | 1 | How much the paintings swing as they land and under your finger (0 = still). |
LIGHT | script.js | 1 | How strong the spotlight cones are, from 0 to 1.6. |
DUST | script.js | 1 | How much dust floats in the light, from 0 to 2. |
When to use it
For the header of an art gallery, a museum, an art fair or an artist presenting a show; for the portfolio of a painter or an illustrator, a framing shop or an art print store; and for any image gallery you want to arrive one at a time, ending on an invitation.
On phones
The same animation with the sizes adapted: the drawing takes the shape of the box, the wall holds three paintings instead of five and the frames are sized on the height too; at the end the wall shrinks a little less and under the title only the button stays, without the line.
With reduced motion
No swinging, no flickering spotlights, no dust and no smooth scroll: the hanging is split into still moments (the empty wall, the paintings hung in groups, the room with dimmed lights and the title). As you scroll, the scene fades and comes back already at the next moment.
Pitfalls
- The swing cannot come from the scroll: if the angle were computed from the number, the painting would stop as soon as you stop scrolling. The scroll only gives the push on landing, time keeps the spring alive.
- The finger over the paintings must be mapped into the wall’s coordinates, which shrinks and moves at the end: use the inverse transform, or you push the wrong painting.
- The whole drawing is rebuilt on resize, because it takes the shape of the box, and once the fonts are ready, because the labels measure the title for their width.
- 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, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 15 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.
