Typographic Index 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 markup. Give .tig a height (the demo fills the viewport); the list scrolls inside it.

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

What the effect needs from your markup: a [data-tig] root containing a scrolling [data-tig-list] of [data-tig-item] rows, and a [data-tig-frame] for the preview. Each item needs an image source, either a <img data-tig-img> inside it or a data-src (plus optional data-alt) on the item itself. Everything else is optional: [data-tig-row] is the focusable control (use a <button> or a link), [data-tig-title] and every [data-tig-meta] feed the caption, and the [data-tig-count], [data-tig-total], [data-tig-caption-title] and [data-tig-caption-meta] slots are filled if present. [data-tig-plate] is the frame's first image before any interaction and the no-JS fallback. Several galleries on one page work independently.

What is only the demo's styling: the fonts (Instrument Serif and Geist), the dark palette, the coral accent, the four-column row grid, the column labels and cue, the edge fade on the list, the large counter and the phone layout. Restyle or delete any of it; the script finds nothing by class name. The html, body { overflow: hidden } and .demo rules only make the demo fill its frame without page scrolling.

CSS the effect depends on:

• The list must be the element that scrolls (overflow-y: auto and a constrained height). It is an ordinary nested scroller: it needs no data-lenis-prevent, and Lenis on the host page leaves it alone.
• .tig__frame needs position: relative and overflow: hidden, and .tig__plate, .tig__layer and .tig__layer img must fill it (position: absolute; inset: 0, object-fit: cover). The script creates the .tig__layer elements.
• .tig__plate[hidden] { display: none } keeps the hidden first image out of the way once a wipe has replaced it.
• The .has-js .tig.is-live rules apply the start and end padding (--tig-pad-start, --tig-pad-end) that lets the first and last rows reach the line, plus the proximity snap (--tig-snap). Keep them if you rename things.
• .has-js .tig__thumb { display: none } hides the per-row images when the script is running, so they never download in the list.

Clicking a row, or pressing Enter or Space on it, shows its image and fires tig:select. Nothing else opens by default, so you decide what selection means: a lightbox, a product page, a filter.

In your downloadThe working code for this step, in script.js.

• Images are fetched only when a row stays active for a moment, then decoded before the wipe starts, so a fast scroll past 30 rows loads one image, not 30. The rows either side of the active one are preloaded.
• Rapid changes never queue: a wipe that has barely started swaps to the newer image, and a later change starts a new layer on top that discards everything beneath it when it lands. At most a few layers exist at once.
• All listeners are delegated to the list, and the row on the line is found with a binary search over measured positions, so hundreds of rows cost the same per frame as ten.
• Row positions are re-measured on resize and after web fonts load. If you add or remove rows after load, call revert() and execute the script again.

• Keyboard: the index is one tab stop. Arrow Up and Down move between rows, Page Up and Page Down jump ten, Home and End go to the ends; each focused row is scrolled to the reading line and becomes active. Enter or Space selects.
• Touch: no hover needed. Scrolling the list drives the reading line, and a tap activates the row and parks it on the line.
• Hover: only a pointer that actually moves claims a row, so a still cursor never fights the reading line while the list scrolls under it.
• Screen readers: rows are native buttons in an ordered list and the active row carries aria-current; the frame's image always has the active entry's alt text.
• Reduced motion: the frame swaps with a short fade, with no wipe, travel or scale; the title indent and the counter change without animation, and keyboard scrolling jumps instead of easing. Changing the preference while the page is open rebuilds the effect at the current row.
• Without JavaScript: the list scrolls normally and every row shows its own image beside its text.

The 50 demo images are baked WebP derivatives in assets/img/, cropped to 720×900 (4:5) with a slight saturation trim so the set reads as one collection. They come from Pexels and Unsplash and are used under the Pexels License and the Unsplash License. The titles, makers and dates are fictional. Replace the images with your own; any aspect ratio works because the frame crops with object-fit: cover, and around 900px tall stays sharp on high-density screens.

To regenerate or change them from a GSAP Vault checkout, edit assets/img-manifest.json (each entry names a stock-library source, an output name, a size and a grade) and run bun scripts/build-template-assets.ts typographic-index-gallery.

Required:

• GSAP 3.12+ (core only; the demo pins 3.15.0)

No plugins, no Lenis and no build step.