# Editorial Case Study

> A photography-led architecture case study with an indexed focal image, project narrative, key facts and a measured outcomes ledger in one refined editorial section.

Canonical: https://gsapvault.com/sections/editorial-case-study-section
Live demo: https://gsapvault.com/demos/editorial-case-study-section/index.html

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | Core GSAP only |
| Techniques | accessible-gallery, clip-reveal, editorial-layout, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Editorial Case Study is a complete portfolio section for architecture and design work. A strong project introduction leads into an asymmetrical photography composition, an accessible image index and a final narrative-and-results spread.

The worked example is clearly fictional, but its project facts, captions and outcome language are specific enough to show buyers how a real case study should feel. The default still is deliberately strong before motion: JavaScript enhances the four-image contact sheet into a focused project plate, while the base document keeps every image and caption available.

The section is self-contained, container-aware and built for ordinary host pages. It does not pin scrolling, install smooth scroll, reset global styles or require a site shell. Root-level tokens collect the palette, type roles, width, spacing and corner treatment for straightforward rebranding.

## Features

- Complete project story combining introduction, photography, project facts, narrative and evidence
- Four-frame accessible image index with arrow, Home and End key support
- GSAP clip-and-settle transitions that overwrite cleanly during repeated input
- Readable four-image contact sheet with no JavaScript or blocked dependencies
- Reduced-motion mode with instant state changes and no decorative entrance animation
- Container-aware desktop, narrow-host and phone compositions with intentional image crops
- Root-scoped brand tokens and semantic edit points for text, links, images and alt text
- Independent multi-instance mounting and instance-scoped teardown

## Use Cases

- Architecture studio project pages
- Interior design renovation case studies
- Product and industrial design project stories
- Creative agency portfolio work
- Cultural and hospitality project showcases

## Vibe-Code Ready Setup

This website section includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

The source HTML is a complete contact sheet: every project figure, caption, fact and result appears in document order. When GSAP is available, the script mounts each `[data-case-study]` root independently, adds an enhanced state and turns the figure list into one focal plate controlled by the adjacent native buttons.

Selecting a frame updates `aria-selected`, the live region and the visible figure. With motion enabled, the incoming figure opens through a clip-path while its image settles from a small scale; outgoing and incoming animations are killed before a new selection, so repeated input always lands on the last requested frame. Reduced motion uses the same controls with immediate state changes.

Each root receives a `destroyCaseStudy` method. Teardown removes its listeners, reverts only its GSAP context, clears enhanced state and restores the full contact sheet. A global `mountEditorialCaseStudies` helper mounts new roots without disturbing existing instances.

## Documentation

How this website section works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### 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](https://www.pexels.com/photo/4328661/), [rusted architectural curve source on Unsplash](https://images.unsplash.com/photo-1486718448742-163732cd1544), [scaled facade source on Unsplash](https://images.unsplash.com/photo-1493397212122-2b85dda8106b), and [white spiral gallery source on Unsplash](https://images.unsplash.com/photo-1439337153520-7082a56a81f4). 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.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This website section is included only in the Vault, for existing and new owners. It is not sold individually. The standard licence covers unlimited personal and commercial projects; bundled assets retain their own licence requirements.

- [Get the Vault](https://gsapvault.com/pricing)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt