Investigative Story Template Template
A one-page investigation for a news publication: a full-bleed lead clip under the headline, three scroll-locked stages where a pinned media column crossfades photograph to photograph as three steps of reporting scroll past it, redacted documents whose bars wipe off as you read, and a right-of-reply statement block.
About This Template
A production-ready one-page site for a single piece of investigative journalism, built for the kind of story that has to carry evidence: figures, documents, a laboratory result and a right of reply, in an order a reader can follow. It ships as a finished article for a fictional outlet, Field & Record, so what you open is a real piece of reporting rather than a skeleton of placeholder headings.
The page is one cool graphite ground with a green cast, one raised plate for anything that counts as evidence, bone type and a single marker orange that only ever means three things: the step you are on, a link, or a redaction lifting. Type is condensed grotesque over reading serif, with a monospace confined to datelines, figure numbers and exhibit stamps so nothing in the reading column competes with the prose.
Two things carry it. Three locked stages each pin a media column for the length of the section while three steps of reporting scroll past: as a step becomes current the media crossfades to that step's photograph, that step's type goes to full strength while the others sit readable but dimmed, and a clip in that frame plays only while its own step is current. Then the evidence section hands you three documents whose black bars flare orange and wipe off to the right under your scroll, revealing the permit reference, the hours and the line somebody did not want in writing.
Making it yours is a copy job and a four-value repaint. Replace the article text, the ten photographs and the two clips; change four colour tokens and their RGB triples and the whole page reskins with no stray literals left behind. Every section is found by a data attribute and guarded, so delete the lead, a whole stage, the documents or the statement and the rest still runs.
What's Included
- Three scroll-locked stages: a media column that pins for the length of the section while three steps of reporting scroll past it, crossfading photograph to photograph as each step becomes current
- A full-bleed lead clip behind the headline that starts only when the section is on screen, pauses when it leaves, and holds its poster frame under reduced motion or with no JavaScript
- Redacted documents whose bars flare to the accent and wipe off to the right, scrubbed against the section so the reader controls the reveal, drawn in CSS with no images and no plugins
- Real video handled properly: muted, playsinline, poster-backed, preloading metadata only, playing solely while its own step is current, and paused when the tab is hidden
- A designed plate behind every media slot - graded gradient, hairline weave and a monospace frame label - so a photograph that has not landed yet leaves the page looking art-directed instead of broken
- Complete newsroom furniture: masthead, kicker, standfirst, a four-cell byline rule, numbered findings, exhibit stamps, a filed-return table, a right-of-reply statement block and a five-part method note
- Four-token palette with RGB triples and every measured contrast ratio written into the stylesheet header, including which surface the accent is banned from carrying type on and why
- Bundled optimised WebP photography with a manifest and a one-command regeneration step, so swapping the picture set is a file drop rather than a rebuild
- Lenis smooth scrolling wired in on a shared clock with ScrollTrigger, anchors routed through it, and entirely optional
- Accessible throughout: the stages degrade to plain stacked figures and paragraphs with no JavaScript, under reduced motion and on landscape phones; inactive steps stay readable rather than being faded out; redacted text is present for screen readers at all times
Perfect For
- Investigations and long-form journalism that need documents, figures and a right of reply in one page
- Research and policy write-ups where each finding has its own evidence to show alongside it
- Non-profit and campaign reports that argue a case from data rather than from sentiment
- Case studies and post-incident write-ups told as a sequence of stages with photography
- Documentary and film companion pages carrying clips, stills and source notes
- Annual impact reports and white papers that want the method published next to the conclusion
How It Works
Structure
One script initialises every section inside a single gsap.context with one gsap.matchMedia, keyed on motion preference and viewport height only, so exactly one branch runs on every device including a phone. Each block is found by a data attribute and guarded, so deleting the lead, a stage, the documents or the statement leaves everything else working. The whole page is a complete static document before any script runs.
The locked stage
Each stage pins its media column from the top of the section to the bottom with pinSpacing off, because the section already owns its height: every step is budgeted just over a viewport of scroll travel, which is what stops one hard wheel flick clearing the whole stage in a single gesture. The step bands are contiguous, so exactly one step is ever current and a mid-page reload still lands inside a band. Above 900px the rig is two columns; below it the media pins to the top of the viewport and the steps scroll beneath.
The redaction wipe
Each bar is an aria-hidden overlay on a span whose text stays in the document, so the redacted content is always present for a screen reader and for search. A scrubbed timeline flares each bar to the accent and then wipes it off to the right on scaleX - the same property the CSS start state sets, which is what stops a parsed pixel offset being left behind. The bars are painted only under the JavaScript gating class, so a reader without JavaScript gets the documents plainly.
Clips that behave
Neither clip carries an autoplay attribute; the script starts them, which makes the poster frame the honest default rather than something JavaScript has to switch off. The lead clip runs only while the lead is on screen. The stage clip runs only while its own step is current and is paused the moment the step changes, and everything stops when the tab is hidden. Under reduced motion nothing plays at all and both posters stand.
Without JavaScript
The gating class goes on in the head before first paint, so reveal start states apply to the first frame and nothing is painted visible and then hidden; the script removes that class if GSAP is missing, so a blocked CDN degrades to the plain document. With scripting off each stage is three figures stacked above three paragraphs, the documents are unredacted, both clips show their posters, and a media file that fails to load hides itself so the designed plate behind it shows instead of a broken-image hole.
:root.
Try them in the preview above.