179
AI ready

Archive Scrubber Gallery

£15
or the whole Vault, £99
Open in new tab

A dated photo archive as a tunnel through time: each month is a cluster of photographs at its own depth, and scrolling, dragging or the timeline flies you forward and back through the year. Stop, and the nearest month's photographs drift out of depth into a flat, readable grid; move again and they loosen back into the tunnel. Click any settled photo to open it full size.

advanced
14 more details
3d-transformsperspectivemomentumstaggerscrubberdrag-scrubtouch-draglightboxshared-elementkeyboard-navigationfocus-managementresponsive-layoutreduced-motionprogressive-enhancement

Released

About this effect

A year of photographs laid out as a tunnel you travel down. Each month is a loose ring of its photographs lining the walls at its own depth, with its name large in the middle. The month you are in fills the view; the months after it wait further down the tunnel, smaller and dimmer the further away they are, each turned a little further round than the last.

Read the full effect overview

Scroll, drag or use the timeline and the camera flies forward and back through the year, gathering speed and easing to a stop. Months ahead rush towards you, and the one you are leaving swells and fades past the edges of the frame. The moment you stop, the nearest month settles: its photographs leave the walls one after another and glide forward into a flat grid facing you, every picture at its true shape, its name tucking itself up into a heading and each photo picking up its date. Move again and the grid loosens back into depth as you set off.

The timeline down the right edge marks every month; its date bubble follows the camera and names the month you are flying through. Click a settled photograph and it grows into a quiet viewer with its full date and caption, and you can step through the whole year from there. Click a photo in a month further down the tunnel and you fly straight to it.

The demo is a studio archive of 76 photographs from February to November, a few of them returning in later months. Only the months near the camera are drawn, so it holds a long archive comfortably.

Archive Scrubber Gallery - GSAP animation effect preview

What's included

16 items
  • Months recede down a tunnel, each a ring of its photographs at its own depth with a large month name in the middle
  • Months ahead are small, dim and hazed; the one you leave swells and fades past the edges of the frame
  • Fly through the year with the wheel or trackpad, by dragging the stage, with the timeline, or with the arrow, Page Up, Page Down, Home and End keys
  • Movement carries on after a flick and eases to a stop on the nearest month
  • The settle: when you stop, the month's photographs leave the walls one by one and glide forward into a flat grid facing you, from the middle outwards
  • Move again and the grid loosens back into depth as the flight begins
  • Settled grids keep every photograph at its true shape, sized so the whole month fits the view, with each photo's date
  • Timeline scrubber with every month marked and a date bubble that follows the camera
  • Click a settled photograph to open the full-size image in a viewer that grows from its place, with date, caption and previous and next across months
  • Click a photo in a later month to fly straight there
  • The wheel inside the gallery always travels through it; the page around it never scrolls
  • Phones: drag up or down to travel, tap to open, and a settled grid of two photographs a row
  • Reduced motion: no flight; months crossfade into each other and the grid is always flat
  • No JavaScript: a plain list of months, each a grid of captioned photographs linking to the large versions
  • Only months near the camera are drawn, and later months' photographs load as you approach them
  • Small API (goToMonth, open, close, relayout) and month change, settle, open and close events

Perfect for

4 use cases
  • Photographer and studio archives that span a year or more
  • Event and festival photo libraries organised by date
  • Family, team or project diaries with a handful of photographs a month
  • Brand and agency timelines where each month or release has its own set of pictures

How it works

3 sections

The archive is ordinary HTML: one section per month with its heading and an ordered list of figures, each linking to the large photograph and carrying its width and height, a date and a caption. Without JavaScript that is the whole gallery, a run of captioned month grids.

With JavaScript each month becomes a layer of the tunnel. Every photograph is given two places: a loose one on the tunnel wall, turned slightly towards the middle, and its place in the month's settled grid, worked out from the sizes in the markup so the grid is right before any image arrives. Flying moves the camera between the layers; settling glides each photograph from its first place to its second, one after another, and loosening sends them back. Months far from the camera are not drawn at all, and their photographs load as you approach.

The flight, the settle and the viewer are GSAP animations. revert() puts the archive back to its original markup and removes the timeline and viewer.

Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 350 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the archive HTML anywhere in your <body>:

In your downloadThe working code for this step, in index.html.

The tunnel needs a height. In the demo it fills the viewport (.showcase-shell is height: 100svh with display: flex); on your page give .archive a fixed or flexible height, for example height: min(80vh, 720px).

Using It With Your Own Design

What the effect needs from your markup:

  • [data-archive] around everything, with display: grid and two rows (the stylesheet sets this): the script adds the timeline and the viewer into that grid, over the stage.
  • [data-archive-stage]: the tunnel. Wheel and drag input land here, and it is focusable so the arrow, Page Up, Page Down, Home and End keys travel. Inside it, one section[data-month="YYYY-MM"] per month in date order. The month key names the timeline ticks (Feb, Mar...) and the year label; the section's h2 is the month label, big while you fly and a heading above the settled grid. The span around the year is optional and only styling.
  • In each section, an ol (or ul) of li > figure > a > img. The link's href is the large photograph the viewer shows. The img must carry width and height attributes: the settled grid is worked out from those numbers, so nothing waits for an image to load. Any pair with the right ratio works.
  • Optional figcaption with a time[datetime] and the caption text: settled photographs show the time, and the viewer shows the date written out in full with the caption. Without them it falls back to the image's alt.
  • Mark images after the first month or two loading="lazy". The script switches each month's images to load as the camera comes within a couple of months of it, and months far from the camera are not drawn at all.

What is only the demo's styling: the Figtree face, the dark palette and the warm glow at the end of the tunnel (the .archive.is-live .archive__stage background), the archive title and count line, the amber year in each label, the date chips, the tick and bubble typography, the viewer's round buttons and the .showcase-shell page wrapper. Recolour from the custom properties at the top of style.css (--page, --ink, --accent, --accent-ink). --label-size sets the month label while flying, --tunnel-perspective how strongly depth recedes (the script reads it), and --scrub-w the width kept free for the timeline.

CSS the effect depends on:

  • .has-js .archive:not(.is-live) .archive__stage { visibility: hidden; } hides the plain list for the moment before the tunnel is laid out. The script adds .is-live as soon as it is, and removes .has-js itself if GSAP fails to load, so the list is never hidden for good.
  • The .archive.is-live rules: the stage gets perspective, overflow: hidden and touch-action: none (so a finger travels the tunnel instead of scrolling the page); each month section is position: absolute; inset: 0 with transform-style: preserve-3d, as is its list, so the photographs share the month's depth; each li is position: absolute (the script writes its size and transform) with max-width: none; the h2 is position: absolute with transform-origin: 0 0 and white-space: nowrap.
  • Do not put opacity, filter or overflow on a month section or its list while it is live: any of them flattens the depth. The script fades the photographs and labels individually instead.
  • .archive__month.is-settled is on the settled month; the demo uses it to show the date chips and a zoom cursor.
  • .scrubber needs touch-action: none so a finger on the timeline scrubs.
  • The stage is not a scroller and consumes the wheel itself, so it needs no data-lenis-prevent; on a page running Lenis the page simply does not move while the pointer is over the tunnel.

Options

Set on [data-archive].

Attribute Values Default Description
data-depth Pixels 1300 (900 under 640px wide) Distance between one month and the next
data-ahead Number 4 How many months ahead of the camera are drawn
data-row-height Pixels 230 Largest row height of a settled grid. Rows shrink below it so the whole month fits the stage (phones cap at 170)
data-gap Pixels 8 Gap between settled photographs (at most 6 on phones)
data-wheel-distance Pixels 360 Wheel or trackpad travel for one month
data-intro true, false true Fly in to the first month on load

Accessibility

  • Keyboard: the stage is focusable; Down, Right and Page Down fly to the next month, Up, Left and Page Up to the previous, Home and End to the first and last. Only the nearest month's photographs are reachable with Tab (the others are inert), and each is a link. The timeline thumb is a role="slider" with the same keys, and its value reads as the month name and its photo count. Each settled month is announced.
  • Viewer: a role="dialog" with aria-modal, opened by clicking or pressing Enter on a photograph. Focus moves to Close and stays inside the dialog (Tab cycles Previous, Next and Close); Left and Right step through the whole archive across months, with the tunnel moving to each photograph's month behind the viewer; Escape closes and focus returns to the photograph. The stage and timeline are inert while it is open.
  • Screen readers: captions stay in the markup for every figure, month sections are labelled by their headings, and the ticks, bubble and hint are hidden from assistive technology because the headings and the slider already carry them.
  • Touch: drag up or down anywhere on the stage to travel, with a flick carrying on; tap a settled photograph to open it. On phones the timeline is a slim strip on the right edge that widens with month labels while you hold it.
  • Reduced motion: no flight and no settle. The wheel, a swipe, the keys and the timeline step a month at a time, and months crossfade into each other with the grid always flat. The viewer opens and closes without growing.
  • No JavaScript: each month is a heading over a wrapped grid of captioned photographs that link to the large versions. The timeline does not exist.

Photographs

The demo is a fictional studio yard's year, February to November 2025: 76 frames drawn from 52 photographs, with some returning in a later month under a new caption to show the archive at length. Each photograph is baked twice into assets/img/ as an art-directed WebP derivative (lightly desaturated, cropped to its ratio): pNN.webp at 600px on the long edge for the tunnel and grid and pNN-full.webp at 1400px for the viewer. The recipe is assets/img-manifest.json.

Use your own: replace the files, or point the links and images at your own, and set each img's width and height to its real size (or any pair with the same ratio). For the tunnel and grid, around 500 to 700px on the long edge is plenty; the large file is only fetched when the viewer opens it or a neighbour. In this repository the manifest can be edited and re-baked with bun scripts/build-template-assets.ts archive-scrubber-gallery.

File Subject Source and licence
p01 Hands shaping a pot on a pottery wheel Pexels
p02 Rows of unfired bowls on kiln shelves Pexels
p03 Glazed bowls packed in an open kiln for firing Pexels
p04 Hands painting dots onto a handmade mug on a plaster bat, maker out of frame Pexels
p05 Shelves of handmade pots and lidded jars in a studio Pexels
p06 Stacked bowls in ochre and dark glazes on a shelf Pexels
p07 A close stack of white handmade bowls Pexels
p08 Two women talking over a white plate in a pottery shop with glazed ware on shelves behind Pexels
p09 Potter in an apron working at a sunlit table, shelves of coloured mugs on a green wall behind Pexels
p10 A student centring clay Pexels
p11 The tutor's hands guiding a student's Pexels
p12 The tutor throwing a bowl Pexels
p13 Trimming the foot of an upturned bowl Pexels
p14 A kiln packed with bisque ware Pexels
p15 A student and the tutor laughing side by side at two pottery wheels, each with clay on the wheel head Pexels
p16 A pottery tutor at the wheel in a yellow shirt and splashed apron, shaping a bowl and smiling to one side Pexels
p17 A florist in an apron carrying a basket of flowers into the shop doorway in the morning Pexels
p18 Two smiling women in aprons cutting stems at a bench in bright daylight Pexels
p19 Women arranging autumn flowers in bowls in warm evening light Pexels
p20 Buckets of mixed flowers outside a flower shop Pexels
p21 A florist tying ribbon on a pink bunch on a rustic wooden table Pexels
p22 A woman holding an armful of blue delphiniums against a neutral background Pexels
p23 A woman holding a loose bunch of cream and lilac flowers at a workshop table Pexels
p24 Group of women arranging flowers at a long workshop table in daylight with greenery everywhere Pexels
p25 Women making Christmas wreaths around a candlelit table Pexels
p26 Hands binding pine into a wreath on a wooden table with twine and candles Pexels
p27 Overhead of a few red apples fallen on a creased canvas sheet with leaves Pexels
p28 Two cupped hands holding red apples Pexels
p29 Three dark unlabelled bottles and a wooden crate of apples on a green cloth Pexels
p30 Two hands presenting a scored round sourdough loaf on a wooden board Pexels
p31 Rustic loaves stacked on wooden racks Pexels
p32 A green grass path between rows of apple trees in summer Pexels
p33 Orchard rows with two wooden crates of red apples on the grass Pexels
p34 Sourdough loaves and wheat ears Unsplash
p35 Hands marking a size on a wooden ring mandrel beside a set of finger gauges on a blue cutting mat Pexels
p36 An empty jeweller's bench: bench pin, saw frame, burrs in wooden blocks and pliers racked on a teal wall Pexels
p37 Whole workshop view with a jeweller at her bench under the lamp and a tool rack behind Pexels
p38 Jeweller sawing at the bench pin, looking down at her work Pexels
p39 Jeweller at the bench pin filing a chain with a rotary tool, lamp and burrs behind her Pexels
p40 Jeweller setting a stone under a microscope, the ring held in a setting ball Pexels
p41 Open palm holding a small tangle of thin gold rings against a warm stone wall Pexels
p42 Loom warp threads and wooden beam Pexels
p43 Maker at a workshop bench, tools on the wall Pexels
p44 Hands guiding an orbital sander across a pale timber board Pexels
p45 Craftsperson in a red beanie facing an organised workshop tool wall Pexels
p46 A man in a yellow roll-neck holding a red vase in front of a table Pexels
p47 A woman in a pink shirt smiling and holding green ceramic cups Pexels
p48 A woman in a red jumper smiling and holding a white footed ceramic bowl towards the camera Pexels
p49 Four people at a table unpacking boxes with yellow and pink paper fill and ceramics Pexels
p50 Overhead of hands, sketches, colour swatches and white ceramic cups on a marble table Pexels
p51 Rows of colourful thread cones in a saturated array, filling the frame Pexels
p53 Spacious white-painted brick studio with tall factory windows, trestle tables and a concrete floor Pexels

Pexels photographs are used under the Pexels License and the Unsplash photograph under the Unsplash License. The people pictured are not connected with this product, and the studio, dates and captions are invented.

Dependencies

Required:

  • GSAP 3.12+ (core only). GSAP tweens drive the flight, the settle and loosen, the reduced-motion crossfades and the viewer; the GSAP ticker draws the tunnel while it moves; GSAP's context and media queries handle the reduced-motion rebuild and teardown. The demo is pinned to GSAP 3.15.0.

No plugins, no Lenis and no other libraries.

Browser Support and Performance

All current browsers with CSS 3D transforms. Only the months within about four of the camera are drawn (the rest are display: none), so the 76 demo photographs never all render at once, and a month's thumbnails start loading when the camera comes within a couple of months of it. The full-size files load only in the viewer. The tunnel redraws only while something moves and stops entirely once a month has settled. Each photograph is drawn with a transform and an opacity, nothing that triggers layout, and the settled grid is worked out once from the size attributes (again, debounced, when the stage changes size).

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£15