028
Optional AI setup

Indie Magazine Template

£10

A complete single-issue site for an independent print magazine, set like a broadsheet front page: a cover headline that typesets itself letter by letter, and pull quotes that grow on scroll while the newspaper columns re-wrap around them live.

ScrollTriggerSplitText Lenis intermediate
5 more details
text-animationscrubscroll-revealstaggertypesetting
Indie Magazine Template - website template preview

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Indie Magazine Template demo in new tab

About this template

A production-ready one-pager for a single issue of an independent print magazine. The fictional title is Small Hours, a magazine of the night shift, and the art direction is the object itself: a broadsheet front page on cold white newsprint, near-black ink, one masthead red, and nothing else. The masthead is a Didone, the body is a news serif set justified and hyphenated in real CSS columns with vertical rules between them, and the chrome - issue number, dateline, price, page references - is a small mono, exactly where a folio would put it.

Read the full template overview

The signature is the typesetting. On load the cover headline sets itself letter by letter, mechanically, like a line of metal type being composed, with the standfirst, byline, columns and cover photograph following in reading order. Then, as you read down the features index, each pull quote is set UP from body size to display size as it scrolls through the viewport - and because the quotes sit inside genuine CSS columns, the surrounding text re-wraps around them live, like a page being re-set around bigger type. Each column block is measured and height-locked first, so nothing below it shifts while you read.

Everything else stays disciplined: a features index set as running column entries rather than cards, a contributors page, a stockists panel, a red subscription plate and an ink colophon. The single photograph ships as a baked, print-graded WebP derivative. Swap the masthead, the features and the stockists for your own issue, point the subscribe buttons at your checkout or mailing list, and deploy the folder as static files - there is no build step.

What's included

12 items
  • Complete deployable single-issue site: folio bar, masthead, section-link nav, cover story, features index, contributors, stockists, subscribe plate, colophon footer
  • Signature typesetting headline: the cover line is split into glyphs with SplitText and set letter by letter on load, mechanical rather than bouncy, with the rest of the front page following in reading order
  • Signature pull-quote reflow: quotes grow from body size to display size on a scrubbed ScrollTrigger, and the real CSS columns around them re-wrap live; each column block is height-locked at its finished size so the sections below never shift
  • A true broadsheet structure: justified, hyphenated body copy in multi-column flows with vertical column rules, a drop cap, folio page references and thick-and-thin section rules
  • Features presented as an index of column entries - folio number, headline, standfirst, byline - not a card grid
  • One editorial photograph, bundled as a baked, print-graded WebP derivative (near-monochrome, cool-toned) with a manifest for regenerating or replacing it
  • Three-colour system - cold white paper, ink, masthead red - with RGB triples and a measured contrast table in the stylesheet header; a reskin is a three-value edit
  • Playfair Display masthead and headlines, Spectral running text, Inconsolata folio chrome - a serif-on-serif pairing used nowhere else
  • Degrades completely: with JavaScript off the headline is simply set, quotes sit at their finished display size, and every column reads in full
  • Reduced motion is the printed page: no typesetting, no growth, everything at its final state via both the CSS media query and the script's own motion branch
  • Sections are independent - every selector is guarded, so the index, contributors or stockists can be deleted and the rest keeps working
  • Lenis smooth scrolling wired in and fully optional

Perfect for

5 use cases
  • Independent print magazines and zines launching or promoting an issue
  • Literary journals, newsletters and small presses with a contents page worth showing
  • Editorial portfolios and journalism collectives that want a newspaper identity
  • Single-essay or longform microsites that read like a front page
  • Learning SplitText and scrubbed ScrollTriggers: a real example of type-driven animation where the layout itself responds

How it works

5 sections

Structure

One script sets the whole front page with a single setup and teardown path, and one motion branch keyed only on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section - the index, the contributors, the stockists - can be deleted and the rest keeps working. All animation start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave the complete printed page.

The typesetting headline

After the fonts load, SplitText breaks the cover headline into glyphs and a timeline sets them one by one - a short drop with a quick ease and a tight stagger, mechanical like a compositor placing sorts. The red rule then draws in and the standfirst, byline, column text and cover photograph follow with a stagger in reading order. Splitting waits for document.fonts.ready so glyph positions are measured from the real faces, not the fallbacks.

The pull-quote reflow

The stylesheet size of each quote is its finished, no-JS state. On init the script locks each multi-column container to its finished height, then starts every quote at 62% size and scrubs it up through a ScrollTrigger as the quote passes the top third of the viewport. Because the quotes are in normal flow inside real CSS columns, the browser re-wraps the surrounding text on every frame - the reflow is the effect - while the height lock stops anything below the block from moving. A debounced resize handler re-measures the locks and hands the positions back to ScrollTrigger.

Accessibility and reduced motion

Under reduced motion the page is simply the printed page: the headline is set, the quotes sit at display size, nothing moves, and Lenis is never created - via both the CSS media query and the script's own motion branch, which also restores the static page if the preference changes mid-visit. All interactive elements are real links with visible focus states that mirror their hover states.

Without JavaScript

There are no JS-built elements: the headline, columns, quotes and index are plain markup, and the reveal start states never apply without the has-js class. With scripting off the site reads exactly like the finished page, top to bottom.

Plugins ScrollTrigger, SplitText
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Questions about this template

Is this for one issue or an ongoing magazine?

One issue. It is a single-issue front page with a cover story, features index, contributors, stockists and a subscribe plate. Running it as an ongoing publication means replacing the page each issue, which suits a quarterly or annual but would be a chore for anything monthly.

Does the text really re-wrap around the pull quotes?

Yes, that is the signature. Quotes grow from body size to display size on a scrubbed ScrollTrigger and the real CSS columns around them re-wrap live. Each column block is height-locked at its finished size so the sections below never shift while it happens.

Can I sell subscriptions through it?

No, the subscribe plate is designed but unwired. Point it at Stripe, Steady, Patreon or whatever you already run. The stockists section is likewise a list you edit, which is usually the more important one for a print title.

Do I need photography?

Barely. One editorial photograph ships, bundled as a print-graded near-monochrome WebP with a manifest for regenerating or replacing it. The rest of the identity is typography, column rules, a drop cap and folio chrome, which is what makes it read as a broadsheet rather than a blog.

Will justified, hyphenated columns be readable on a phone?

Yes, the multi-column flow collapses down rather than forcing narrow justified columns, which is where justification actually breaks. On desktop you get true broadsheet columns with vertical rules; the type system is Playfair, Spectral and Inconsolata, a serif-on-serif pairing used nowhere else in the catalogue.

Paid template

Purchase to unlock the code.

Buying Indie Magazine Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£10 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

  1. Copy the whole folder to your web server (or any static host). There is no build step.
  2. Open index.html and replace the copy: masthead, issue number and dateline in the folio bar, the cover story, the index entries, contributors, stockists and prices.
  3. Point the subscribe buttons (.subscribe-actions in the subscribe section) at your checkout, Stripe payment link, or mailing list.
  4. Replace the cover photograph: drop your own image over assets/img/cover.webp (1000 x 1250), or edit assets/img-manifest.json and re-run the bake (see Images below).
  5. Deploy. The page works with JavaScript disabled, so nothing else is required.

The GSAP scripts load from a CDN in index.html; swap assets/script.js for assets/script.min.js in production if you prefer the smaller file.

The two signature moments

The typesetting headline

The element carrying data-typeset (the cover <h1>) is split into glyphs and set letter by letter on load. Everything carrying data-after-set (standfirst, byline, column text, the photograph, the ear box) follows in DOM order.

  • Change the headline: edit the text; the split adapts. Keep it under about 30 characters if you want it to finish quickly - the stagger is 0.038s per glyph.
  • Slow it down / speed it up: in assets/script.js, the stagger: 0.038 and duration: 0.16 values in the typesetting block.
  • Remove it: delete data-typeset from the headline. The page falls back to showing everything immediately (the data-after-set elements are then shown without the sequence).

The pull-quote reflow

Any .pull-quote inside a container carrying data-flow grows from 62% to full size on a scrubbed ScrollTrigger as it passes the top third of the viewport, and the CSS columns around it re-wrap live. The stylesheet size is the finished size - the script only starts them smaller - so no-JS and reduced-motion readers see the finished page.

  • Add a quote: drop <blockquote class="pull-quote">...</blockquote> anywhere inside a data-flow container. Nothing else to wire.
  • Tune the growth: setSize * 0.62 (start size) and the start/end positions of the ScrollTrigger in the pull-quote block of script.js.
  • Why nothing jumps: each data-flow container is measured at finished-quote size on init and locked to that height with min-height, so the sections below never move while a quote grows. A debounced resize handler re-measures.

Sections

Every section is independent: the script guards all its selectors, so you can delete any of these wholesale and the rest keeps working.

Section id Notes
Folio bar + masthead + nav (header) Issue number, dateline, price; nav links are plain anchors
Cover story #cover Headline (data-typeset), standfirst, two-column body (data-flow), photo, "ear" box
Features index #index Column entries: folio, headline, standfirst, byline; two pull quotes in the flow
Contributors #contributors Grid with vertical rules; editors' note beneath
Stockists #stockists Recessed panel, mono list
Subscribe #subscribe The red plate; price panel with two buttons
Colophon (footer) Ink plate: about, colophon, contact, back-to-top

Palette

Three colours, declared once in :root at the top of assets/style.css, each with an RGB triple so every translucent value derives from a token:

Code snippet omitted: it ships with the download.

Change a hex, change its triple, and the issue reprints. --paper-deep is the recessed panel tone (the ear, the stockists band). The header comment above :root records the measured contrast table and its constraints - read it before adjusting: the red is pinned by small red type on the deep panel (5.03:1), and red type is banned on the ink plate (3.52:1, rules and ornaments only there).

Type

  • Playfair Display - the metal: masthead, headlines, pull quotes, prices. Nothing else.
  • Spectral - all running text, justified and hyphenated in the column flows.
  • Inconsolata - the folio chrome: datelines, page references, bylines, captions, buttons.

All three load from Google Fonts in the <head>. If you swap faces, keep the roles: one display serif, one text serif, one mono for chrome.

Images

The single photograph ships as a baked, optimised WebP derivative - a near-monochrome, cool-toned print grade applied to the pixels, not a hotlink and not a raw original.

  • Swap it: replace assets/img/cover.webp with your own 1000 x 1250 image (any 4:5 crop works; the <img> has explicit width/height).
  • Regenerate or re-grade: assets/img-manifest.json holds the source URL, output size and grade. From the GSAP Vault repo: bun scripts/build-template-assets.ts indie-magazine-template.

The original is a royalty-free photograph from Unsplash, used here as an altered, art-directed derivative:

Accessibility

  • Reduced motion: honoured twice - a CSS prefers-reduced-motion block and a gsap.matchMedia branch. The reduced page is simply the printed page: headline set, quotes at display size, nothing moving, Lenis never created. A mid-visit preference change restores the static page.
  • No JavaScript: the complete page renders from plain markup; all animation start states are gated behind a JS-added has-js class.
  • Keyboard: every interactive element is a real <a> with a visible :focus-visible state mirroring its hover state; a skip link jumps to the front page.
  • Screen readers: decorative rules and the moon ornament are aria-hidden; the cover photo has descriptive alt text; the ear box is a labelled <aside>.

Browser Support

Modern browsers (ES5 syntax, CSS columns, document.fonts). Not compatible with IE11.

Dependencies

  • GSAP 3.14+ (core)
  • ScrollTrigger plugin (reveals and the pull-quote scrub)
  • SplitText plugin (the typesetting headline; free since GSAP 3.12)
  • Lenis (optional - smooth scrolling; the page works without it)

All loaded from CDN in index.html. If any script fails to load, the page degrades to the finished static issue.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Every effect, template and UI element: 165 today, plus everything we release next.

Or browse effects, templates or UI elements.