# Editorial Story Spread

> A photographic essay section with large scroll-driven apertures that open, hold and close around each chapter, with reversible image reframing and native reading links.

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

| Property | Value |
|----------|-------|
| Type | section |
| Tier | paid |
| Price | Included only in the Vault |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | clip-path, scrub, zoom, sticky-scroll-story, editorial-layout, responsive-section |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 2 October 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 Story Spread turns an illustrated essay into a photographic reading experience. A large serif title introduces the story; scrolling opens a generous aperture around its first photograph, holds the full view during the passage, then closes the frame before the next chapter opens. Image scale and reframing move with the aperture, and reversing the scroll retraces the choreography.

On desktop the photograph holds beside the natural reading column. Phones and narrow hosts keep a separate in-flow aperture for each chapter, giving the imagery room without covering the prose. Native contents links remain subordinate aids for rereading.

Every paragraph, caption and photograph remains available with reduced motion or without animation. The fictional coastal journal and generated concept photography form an editable worked example, with ordinary local image files and root-level brand controls.

## Features

- Large photographic aperture that expands from a central shutter into the full reading frame
- Open, hold, close and next-photo handoffs driven by real chapter progression
- Synchronized image scale and reframing with reversible scroll choreography
- Desktop sticky photograph beside prose in ordinary document flow
- In-flow photographic apertures for phones and narrow host columns
- Complete static essay with every photo available under reduced motion, no JavaScript or missing dependencies
- Native chapter links, semantic text and ordinary local photo replacement points
- Independent instances with scoped mounting, resizing and teardown

## Use Cases

- Culture journal features
- Museum object stories
- Material and craft essays
- Environmental editorial stories
- Photography-led brand journals

## 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

As the reader moves through each chapter, its photograph opens from a narrow aperture into the complete frame. The image settles from a closer view, stays clear while the passage is read, then closes before the following photograph opens. Scrolling backward reverses the same sequence.

Desktop photography holds within the story beside the reading column. Phone and narrow-column layouts give each chapter its own in-flow photograph and aperture. No custom scroll controls are needed to read or revisit a chapter. Reduced motion presents every photograph fully open in a static essay.

Buyers can replace the writing and photographs, change crops and branding, and add or reorder chapters through ordinary content edits.

## 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

Keep `index.html` and `assets/` together and serve through your usual web server. No buyer build step. The demo loads GSAP 3.15.0 core and ScrollTrigger from jsDelivr, and Literata/Work Sans from Google Fonts.

For an existing page, copy the complete `<section class="tw-story" data-tw-story>` between the extractable boundary comments. Include its stylesheet, the font link, GSAP core, ScrollTrigger and readable script once. Preserve asset paths or adjust them for your host. The standalone preview includes gentle Lenis wheel smoothing, driven from the same GSAP clock as ScrollTrigger. Touch scrolling remains native. Reduced motion disables it, including preference changes while mounted; `?smooth=off` uses native scrolling for comparison. The Lenis tag and preview initializer outside the extractable section are demo context: omit them when embedding, letting your host own page scrolling. `window.destroyTideworkPreview()` removes the preview smoother and its clock/listeners.

The outer `<main>` and inline body style are standalone preview context; omit them when the host already provides its main landmark and page styling.

_Code snippet omitted: it ships with the download._

The supplied inline script inside the root is an optional first-paint guard, scoped to that story's photographs. Keep it when extracting the whole root. It releases at DOM readiness even if GSAP or the main section script fails; with no JavaScript or reduced motion it never hides the photos. Removing the inline guard leaves the static-to-enhanced layout visible briefly during startup without changing functionality.

### Make it yours

Edit the story title, deck, chapter headings, prose, captions and disclosure directly in HTML. The classes carry typography; use the heading levels your host needs. The native contents and return links are ordinary local anchors.

Brand controls are grouped on `.tw-story`: ground, ink, secondary, rule and accent; RGB triples; serif/sans font roles; maximum width, gutter, reading measure, gap and corner. For example:

_Code snippet omitted: it ships with the download._

Measure contrast after changing colors. Meaningful text uses solid grounds; the initial ink/ground measures 9.24:1 and secondary/ground 6.00:1. One finished sage design ships, with no demo theme picker.

#### Replace photographs

Every `[data-tw-chapter]` article owns one ordinary `[data-tw-photo]` figure, with an `<img>` and `<figcaption>`. Desktop enhancement temporarily moves those figures into the section's own rail, then restores them at teardown. Edit the original figure in the article.

| File | Recommended source | Focal position |
|---|---|---|
| `assets/img/rockpool.webp` | Landscape, at least 1536px wide | `50% 55%` |
| `assets/img/seaweed.webp` | Portrait, about 900 × 1350 | `50% 50%` |
| `assets/img/shoreline.webp` | Landscape, about 1200 × 800 | `67% 50%` |

Use any suitably licensed local photo. Change `src`, intrinsic `width`/`height`, descriptive `alt`, and the adjacent caption. The figure's `--tw-position` controls the image focal point in both the live rail and static frame. `--tw-ratio` controls the static desktop frame; the named container rules choose phone ratios. The live desktop rail deliberately uses one large frame for all subjects. Crop and preview your replacement at that frame size and on phones. No subject-specific SVG path, image generation or animation change is needed.

The first image loads promptly. Enhancement preloads the later photographs before they can enter the rail. Lazy loading remains available in the static markup/fallback.

#### Add, remove or reorder chapters

Add a `[data-tw-chapter]` article with a unique authored ID, one `[data-tw-photo]` figure, and a `.tw-prose` block containing its heading/text. Add one matching `[data-tw-link]` contents anchor whose `href="#chapter-id"` points to that article. Remove or reorder an article and its matching contents link together. Counts, chapter lengths, photo handoffs and selection are derived from that markup; no duplicate content array or fixed count needs editing.

A single chapter opens and holds its image without a redundant closing handoff. There is no enforced maximum; use enough writing to give each photograph a meaningful reading beat. Longer copy extends its natural chapter and recalculates the aperture range.

Multiple no-JavaScript instances need unique authored title IDs, `aria-labelledby`, chapter IDs and matching hrefs. With GSAP available, the runtime assigns unique IDs per instance and restores the authored values on teardown.

### Motion and lifecycle

Set these options on the root separately from brand tokens:

- `data-aperture-scrub="0.14"`: seconds of scrub smoothing; `0` links the response directly to scroll.
- `data-aperture-scale="1.42"`: initial close-view scale, clamped from 1 to 1.8. Set `1` to keep the image scale constant while the frame opens.

Desktop reading progress drives an open/hold/close envelope through each actual chapter, with the next image exchanged behind the closed aperture. The last chapter holds open as the reader leaves. The photo rail uses CSS sticky; no ScrollTrigger pin, Lenis or custom wheel owner is installed. Below 900px root width, each local photo opens while entering the viewport, holds visibly, and closes as it leaves. Captions and prose remain outside the moving crop.

_Code snippet omitted: it ships with the download._

Repeated mounting does not stack triggers/listeners. Each story owns its GSAP/media contexts, resize observer, load listeners, generated rail/wrappers and moved-node homes. Font, image and container changes refresh its measurements. Teardown restores full photography, original markup placement and authored attributes while preserving unrelated host animations.

### Accessibility and integration

Native anchors support keyboard and touch, with visible focus and 44px minimum hit heights. Every passage remains in ordinary reading order. No panel selection hides text. Reduced motion presents the complete static essay with all photographs open; changing the preference while mounted rebuilds that static state. Missing dependencies and no JavaScript retain all content and native links.

Desktop sticky needs an ancestor that permits sticky positioning; an overflow-clipping host ancestor can prevent the rail from holding. The body keeps its full natural scroll length and releases at its own end. Phones and narrow columns use in-flow photos. The catalogue's `previewScroll` setting supplies internal reading scroll in the canonical preview; an ordinary buyer page simply uses its native document scroll.

Source checks cover desktop/laptop/mobile/narrow states, aperture progression and reversal, keyboard/touch, reduced-motion changes, no-JavaScript/blocked scripts, independent instances, teardown/remount, chapter edits and ordinary photo replacement. This does not promise compatibility with every framework, CSP or arbitrary color choice.

### Dependencies and credits

- GSAP core and ScrollTrigger. Source uses 3.15.0, with a GSAP 3.12+ compatibility floor; follow GSAP's applicable license.
- Literata and Work Sans via Google Fonts, under the SIL Open Font License. Self-host them if your host's privacy/CSP requirements need it.
- Three original AI-generated concept photographs from built-in imagegen. They do not document a real location, writer, event or client outcome; no exclusivity is claimed. Use is subject to the product license.
- Tidework and the essay are fictional sample content. Replace the visible disclosure with accurate credits for your own published story.

## 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