# Indie Magazine Template > 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. Canonical: https://gsapvault.com/templates/indie-magazine-template Live demo: https://gsapvault.com/demos/indie-magazine-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £12 | | Difficulty | intermediate | | Plugins | ScrollTrigger, SplitText | | Techniques | text-animation, scrub, scroll-reveal, stagger, typesetting | | Uses Lenis | Yes | ## Overview 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. 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. ## Features - 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 matchMedia 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 ## 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 ### Structure One script sets the whole front page inside a single gsap.context, with gsap.matchMedia 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 matchMedia 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### 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. ### 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 `` 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 `