Editorial Case Study

Quick Start

Add the stylesheet, copy the complete <section class="ecs" data-case-study> block from index.html, then load GSAP 3.15.0 and the section script before </body>:

Code snippet omitted: it ships with the download.

The preview opens directly on the section. Copy the section root into your host page; the document wrapper and inline body styles are preview-only. The section has no build step and does not install Lenis or change host scrolling.

Make it yours

Edit the eyebrow, title, summary, facts, story, outcomes and link directly in the semantic HTML. Each [data-figure] owns one image, its descriptive alt, its caption and the short data-label announced when selected. Keep the matching [data-select] buttons in the same order.

Replace the four files under assets/img/ or update the image paths. The focal plate is 3:2 on wider containers and 4:5 below 760px, so check both crops; use the per-figure object-position rules in style.css when the subject is off-centre. Preserve intrinsic width and height on replacements.

The brand controls are grouped at the top of .ecs in style.css: paper, ink, muted ink, rule, cobalt accent, clay evidence colour, display/body fonts, maximum width, gutter, vertical spacing and corner radius. For example:

Code snippet omitted: it ships with the download.

Keep each RGB triple in step with its solid colour because the dim text and rules derive from those values. Fonts use system fallbacks and do not depend on GSAP Vault font files.

Behaviour and options

Set data-transition="0.62" on the section to change the image handoff duration; values are clamped from 0.15 to 1.4 seconds. The section does not autoplay.

Every root mounts independently. For a root added after page load, call:

Code snippet omitted: it ships with the download.

Before removing an instance in an SPA, call its scoped teardown:

Code snippet omitted: it ships with the download.

Teardown removes that instance's listeners, reverts its GSAP context and restores the readable contact sheet. It does not kill animations elsewhere on the page.

Accessibility and integration

The project index uses native buttons with visible focus, role="tablist", selected state and a polite status message. Left/Right and Up/Down arrows move one frame; Home and End jump to the ends. Touch users can tap a frame or horizontally scroll the thumbnail rail on narrow containers. Repeated input interrupts the current transition and settles on the most recent selection.

Reduced motion keeps the selector but changes images immediately. With JavaScript disabled or GSAP missing, all four photographs and captions remain visible in document order. Choose the heading level for the host page; the example uses an h2. There is no pinning, fixed viewport height or full-width requirement. The layout responds to the section's own container at 760px, so it can sit inside a narrow content column.

The outcomes in this demo are explicitly illustrative. Replace them with verified data before publishing a real case study.

Dependencies and image credits

• GSAP 3.12+ (built and tested with 3.15.0), core only.
• Photography is bundled as art-directed WebP derivatives. Originals: brutalist block on Pexels, rusted architectural curve source on Unsplash, scaled facade source on Unsplash, and white spiral gallery source on Unsplash. Pexels and Unsplash permit free commercial use under their current licences; review the source licence if redistributing substantially changed assets outside this section.

assets/img-manifest.json records the inspected source URLs, output sizes and baked grades. Rebuild derivatives from the repository with bun scripts/build-template-assets.ts editorial-case-study-section --force. The buyer-facing section itself needs no build step.