Contact Sheet Gallery

1. Add to your HTML <head>:

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

2. Add before the closing </body> tag:

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

3. Add the gallery where you want it. One <li> per photograph: the link points at the full-size file, the image is the thumbnail. The control row is optional.

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

The section fills its parent's height by default. To give it its own height, set --sheet-height on it (for example style="--sheet-height: 80vh").

What the effect needs from your markup: a [data-contact-sheet] element containing .contact-sheet__grid with one .contact-sheet__frame link per photograph (inside .contact-sheet__scroller). Each link's href is the full-size image shown close up; its <img> is the thumbnail used on the table. Give every thumbnail real width and height attributes in the photograph's proportions: the script reads them to shape each print (portrait frames sit centred in a landscape slot). The caption is the link's data-caption, falling back to the image's alt. The table, its sheets, frame numbers, captions, ticks and keyboard cursor are generated by the script, so there is nothing else to write.

The list order is roll 1. Later rolls reuse the same photographs in a different, fixed order for each roll, so the same table always looks the same.

What is only the demo's styling: Mona Sans, the grey table, the paper colour of each sheet, the black frame rebate, the red tick, the roll labels and the control row styling are decoration. Change the custom properties at the top of style.css (--page, --table, --ink, --ink-faint, --film, --pencil) to reskin it. The control row and its hint are optional: delete them, or put data-sheet-action on your own buttons anywhere inside the section (zoom-in, zoom-out, fit, infinite, single).

CSS the effect depends on:

• .contact-sheet must be position: relative with a real height and overflow: hidden: the table is drawn inside it and the camera fits the sheets to its size.
• The sheet geometry is fixed in the script (150 × 100 slots with a 16px number line, 14px and 10px gaps, 40px gutters between sheets), and the CSS sizes match it: .contact-sheet__cell-v is 116px tall, .contact-sheet__print is 100px tall and .contact-sheet__meta sits at 102px. Change those together with the constants at the top of script.js.
• .contact-sheet__table has touch-action: none, which is what lets one finger pan and two fingers pinch without scrolling or zooming the page. Nothing outside the stage is affected.
• .contact-sheet__world is positioned at the top left with transform-origin: 0 0. Labels inside it use --s (the current zoom, set by the script) to keep a readable size: --k scales frame numbers between 8px and 12.5px on screen.
• --inset-top, --inset-bottom and --inset-side on .contact-sheet keep the centre of the view, and fitted frames, clear of the control row and anything pinned at the foot of the stage.

Set these as data- attributes on the [data-contact-sheet] element.

CSS custom properties on .contact-sheet:

• Keyboard: the table is one tab stop with a visible focus outline. Arrow keys move a ringed cursor from frame to frame, across into the next roll at a sheet's edge, and the view follows it. Enter or Space flies in to fit the cursor's frame; while you are zoomed in on a frame the arrows step to the neighbouring frame and fly to it, like a viewer. Shift + arrows pan by a quarter of the view. + and - zoom (about the cursor when it is on screen), and 0 or Escape fits the whole roll. The control row buttons are ordinary buttons with labels and pressed states.
• Screen readers: the list of links stays in the page, visually hidden, so the photographs, their captions and links to the full-size files remain readable and in order. The table is labelled as a light table and described by the hint line; a polite live region announces the cursor's frame number, roll, caption and whether it has been viewed. The drawn table itself is hidden from assistive technology.
• Touch: one finger pans with momentum, two fingers pinch about their midpoint, and a double-tap flies to a frame (double-tap it again to step back out). Only the stage blocks the browser's own gestures; the rest of the page scrolls and zooms normally.
• Wheel in a page: see data-wheel. Inside a full-window demo the wheel pans; in a page section the page keeps the wheel until the visitor engages the table.
• Reduced motion: no momentum, no easing and no flights. Every pan, zoom, focus and fit lands at once, captions and full-size images appear without a fade, and ticks appear without being drawn. Changing the preference while the page is open rebuilds the gallery and keeps the view and the ticks.
• No JavaScript: the gallery is the full grid, and every frame is an ordinary link to its full-size image.

The demo ships 48 photographs as baked WebP derivatives in assets/img/: fNN.webp thumbnails (360px on the long edge) and fNN-full.webp close-up images (1600px on the long edge), cropped to 3:2 or 2:3 with a slight, even saturation trim so the set reads as one roll. They are from Pexels and Unsplash and used under the Pexels License and the Unsplash License. Replace them with your own photographs for production; the gallery works with any number.

To regenerate or change them, edit assets/img-manifest.json (each entry names a source, an output name, a size and an optional grade) and run bun scripts/build-template-assets.ts contact-sheet-gallery from a GSAP Vault checkout, or export your own thumbnails and full images at similar sizes.

Required:

• GSAP 3.12+ (core only). One GSAP ticker drives the camera, the momentum and the elastic edges; GSAP tweens fly the camera and draw the ticks, and 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.

All current browsers. Trackpad pinch arrives as ctrl + wheel in Chrome, Edge and Firefox and as gesture events in Safari; both are handled. The table moves by transforming one layer, so panning costs the same at any distance; cells are only reassigned when a new row or column comes into view, and the pool is capped at about 460 cells (around 1,500 elements in the demo) however far out you zoom. The layer is promoted only while it moves and released at rest, so frames repaint sharp at the zoom you stop at. Keep thumbnails small (around 10 to 25 KB each): they are what the table shows at every distance, and all of them load up front.