Filter Reflow 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 inside an element with a height (the demo fills the viewport):

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

What the effect needs from your markup: a [data-frg] wrapper holding a [data-frg-stage] scroller and a [data-frg-grid] list. Every direct child of the grid with a data-tags attribute is a photo; tags are space-separated, so data-tags="food portraits" puts a photo in both. Each photo needs an <img> with real width and height attributes (the layout reads its shape from them and never waits for the download), a <button class="frg__open"> around the image, and optionally a .frg__caption holding a .frg__title (shown on one line under every photo) and a .frg__meta line (shown only on the open photo). Chips are any <button data-filter="name"> inside the wrapper; data-filter="all" shows everything. A [data-frg-count] inside a chip is filled with that chip's photo count, and [data-frg-status] receives the screen reader announcement. The script reads no other classes.

What is only the demo's styling: Manrope, the grey ground, the vermilion active chip, the pill chip shape, the studio name, rounded corners, the image hover zoom and the caption typography. Replace any of them freely.

CSS the effect depends on: the stage must have a fixed or flex-constrained height with overflow-y: auto (it is an ordinary nested scroller; it needs no data-lenis-prevent). The .frg.is-masonry rules make the grid position: relative and each item position: absolute with overflow: hidden; .is-out hides filtered photos with visibility: hidden; .frg.is-masonry .frg__open takes its aspect-ratio from the --frg-ratio property the script sets, and the open photo uses --frg-media-h. Gaps come from the grid's column-gap, so change --gap (or column-gap) rather than adding margins. Keep the html:not(.has-js) .frg__chips { display: none } rule so chips never appear without the script.

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

Set a chip's aria-pressed="true" in the markup to start on that filter. data-label on a chip overrides the name used in the announcement.

• Chips: click or press Enter/Space. The grid reflows as a wave from the chip; the stage scrolls back to the top.
• Photos: click, Enter or Space opens a photo across two columns with its caption, scrolling it into view if needed. Click again, press Escape or open another photo to close it. A filter change keeps the open photo when it still matches.
• Interruptions: a click part-way through a reflow starts the next one from wherever every photo is on screen, so rapid clicking never leaves a photo stranded or half-faded.
• Resizing: the column count follows the stage width and the grid re-lays out instantly.

• Native buttons: chips and photos are <button> elements with visible focus rings; chips carry aria-pressed, photos aria-expanded.
• Announcements: each filter change announces the count and the category, for example "9 photos, Flowers", through a polite live region.
• Hidden photos: filtered-out photos are made inert and aria-hidden, so Tab and screen readers skip them.
• Reduced motion: with prefers-reduced-motion: reduce the grid re-lays out instantly with a short fade and nothing travels. Changing the setting while the page is open rebuilds the gallery and keeps the current filter and open photo.
• No JavaScript: the photos show in simple CSS columns with their captions; the chips are hidden because they would do nothing. If GSAP or Flip fails to load, the page falls back to the same layout.

Only the photos that move animate, all with transforms and opacity except the open photo, whose size changes. Images after the first dozen use loading="lazy", and one click listener serves the whole gallery, so the set can grow without adding listeners. The demo's 45 WebP files total about 2.2MB.

The demo photographs are art-directed derivatives (resized to 700px wide at their original proportions and gently desaturated) of photos from Pexels and Unsplash, used under the Pexels and Unsplash licences. assets/img-manifest.json lists them by GSAP Vault stock library id; regenerate with bun scripts/build-template-assets.ts filter-reflow-gallery after editing it. To use your own photos, replace the files in assets/img/ or point each <img> at yours, and update its width and height attributes to the real proportions. Around 700px wide stays sharp at two columns.

Required:

• GSAP 3.12+ with the Flip plugin (the demo pins 3.15.0)

Not used: Lenis or ScrollTrigger. The page never scrolls; only the gallery stage does.