# Long-Form Story Template > A one-page long read laid out for reading: a single 68-character measure on a pale celery ground, a sticky chapter spine with a scrubbed plum progress thread, inline-SVG figures that break the column, and four principle cards that stack into a deck as the section pins. Canonical: https://gsapvault.com/templates/long-form-story-template Live demo: https://gsapvault.com/demos/long-form-story-template/index.html | Property | Value | |----------|-------| | Type | template | | Tier | paid | | Price | £10 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | scroll-stack, pinning, scrollspy, svg-draw, scroll-reveal, reading-progress | | Uses Lenis | Yes | ## Overview A production-ready one-page site for a single long read, built around a reading experience rather than a business type. It ships as a fictional publication, Fieldnote, carrying a first-person account of rebuilding a small manufacturing workshop over four years, so what you open is a finished article and not a skeleton with placeholder headings. The page is one ground and one measure throughout: pale celery paper, near-black ink, a plum accent that is dark enough to carry body copy, and a single raised card surface. Prose sits at a real reading size in a column of about sixty-eight characters, and the only things allowed out of that column are two figures drawn entirely in inline SVG, a plotted quarterly timeline and an annotated section through the workshop. Two pieces of behaviour carry it. A sticky chapter spine runs down the left margin above 1100px, its tick expanding and its chapter name unfurling as you pass, with a plum thread that fills the rule by stroke-dashoffset as you descend; below 1100px the spine becomes a slim fixed progress bar at the top of the viewport. Then the principles section pins and its four cards stack over one another, each incoming card sliding up, overshooting a few pixels and settling while the cards beneath scale down, dim and lean in sequence, so a visible deck builds under your thumb. Making it yours is a copy job and a four-value repaint. Replace the article text, the chapter titles and the two figures' data; change the four colour tokens and their RGB triples in the token block and the whole page reskins with no stray literals left behind. Every section is found by a data attribute and guarded, so a buyer can delete the figures, the principles, the evidence table or the endnote and the rest still runs. ## Features - A complete long read as shipped copy: opening with a hairline meta rule, four chapters of real prose with a drop cap, a stacking principles section, two pull quotes with a five-row ledger, endnote, about block and footer - Signature scroll stack: the principles section pins and four cards build into a deck, the locking card overshooting and relaxing while the cards beneath compress in a stagger and a live counter reports the position - Sticky chapter spine above 1100px with real anchor links, an expanding tick, an unfurling chapter name, and a plum reading thread drawn by stroke-dashoffset with no extra plugin - Slim fixed reading-progress bar below 1100px, whose measured height is what the pinned section starts below so the deck is never hidden underneath it - Two designed inline-SVG figures that break the reading column: a plotted quarterly timeline with a called-out event, and an annotated cross-section with dimensions, a hatched ground and a scale bar - One measure everywhere, set as a token: prose at a real reading size in about sixty-eight characters a line, with a three-column grid that lets a figure break out without a negative margin - Four-token palette with RGB triples and every measured contrast ratio written into the stylesheet header, so a reskin is four values and a reader never lands on unreadable type - Hairline-ruled data table with a real caption and row headers, scrollable on a phone rather than crushed - Lenis smooth scrolling wired in, kept in lockstep with the pinned stack, anchors routed through it, and entirely optional - Accessible throughout: the stack degrades to a plain readable list with no JavaScript, under reduced motion and on viewports too short to hold a deck; following a spine link moves keyboard focus into the chapter; every figure has a title and description ## Use Cases - Company or founder stories that need to read as an essay rather than an about page - Case studies and project write-ups where the argument matters more than the screenshots - Research summaries, white papers and technical write-ups with charts and diagrams in the flow of the text - Annual reviews and impact reports that want figures inside the prose instead of a slide deck - Independent publications and newsletters publishing one long piece at a time - Product stories and manufacturing or process pieces where a timeline and a schematic do the explaining ## How It Works ### Structure One script initialises every section inside a single gsap.context with one gsap.matchMedia, keyed on motion preference, width and viewport height so exactly one branch runs on every device including a phone. Each section is found by a data attribute and guarded, so deleting the figures, the stack, the table or the endnote leaves everything else working. The whole page is a complete static document before any script runs: the article, the figures and the four cards are all markup. ### The reading chrome A single ScrollTrigger spanning the article drives both the spine thread and the mobile progress bar. The thread is a plain SVG path carrying pathLength="1", so its dash units are normalised and the script only has to set stroke-dashoffset between 1 and 0, no drawing plugin involved. A second set of triggers, one per chapter with contiguous bands, marks the current chapter: exactly one is ever current, so jumping straight to an anchor still lands inside a band. ### The card stack The stage pins below the fixed progress bar, whose height is measured live rather than assumed, and a scrubbed timeline slides each card up into place. The locking card overshoots four pixels and relaxes; the cards already locked drop one depth level each, scaling, dimming and leaning with a small stagger so the deck compresses in sequence rather than snapping as a block. Every distance is a function with invalidateOnRefresh, everything moves on pixel y rather than a mix of units, and the first card stays in normal flow so the deck's height is measured rather than guessed. ### Reduced motion and short screens The plain vertical list of four cards is the default, in both the markup and the CSS; the pinned deck is a class the script adds. So a reduced-motion visitor, and anyone on a viewport too short to show a card with the deck behind it, gets the readable list instead of a frozen pin, and the depth offsets and number of visible cards are reduced below 700px so the deck can never overflow a phone. Reading progress and the chapter spy still run in the reduced-motion branch, because they report position rather than animate. ### 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 rather than hiding content forever. With scripting off the chapter spine is still a working list of anchor links with its thread drawn full, the progress bar is hidden rather than left empty, the cards are a plain list, and both figures render exactly as drawn. ## 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 into your project. It is static, no build step, no bundler. 2. Open `index.html` and replace the copy: the publication name (**Fieldnote**), the piece (**The Slow Build**), the byline and meta rule, the four chapters, the four principle cards, the two pull quotes, the table, the endnote and the about blocks. 3. Update the two figures. Both are plain inline `` in `index.html` with commented groups, see [The figures](#the-figures) below. 4. Update the chapter spine to match your chapters, see [The chapter spine](#the-chapter-spine). 5. Deploy the folder as-is. GSAP and Lenis load from a CDN; nothing else is required. **The scripts at the end of ``:** ```html ``` **This one line in `` is load-bearing, keep it:** ```html ``` It runs before the first paint, so the reveal start states apply to the very first frame and nothing is painted visible and then hidden. `assets/script.js` **removes** the class if GSAP failed to load, so a blocked CDN degrades to the plain document instead of hiding content forever. ### Accessibility - **Reduced motion**: handled twice, in a `@media (prefers-reduced-motion: reduce)` block and in a `gsap.matchMedia` branch. Nothing pins, the four cards stay a plain readable list, and every reveal target is held visible. The reading progress and the chapter spy still run, because they report position rather than animate. - **No JavaScript**: every word on the page is readable. The spine is still a working list of anchor links (with its thread drawn full), the progress bar is hidden rather than left sitting empty, the cards are a plain list, and both figures render exactly as drawn. - **Short viewports**: if the viewport cannot hold a card with the deck behind it, the stack simply does not build. Nothing is ever cut off by the pin. - **Keyboard**: the spine items are real links with a visible `:focus-visible` ring, and following one moves focus to the chapter heading as well as the viewport, so you land in the prose rather than staying parked in the margin. The unfurling chapter name is clipped, never hidden, the chapter number stays visible, and hover or focus opens any name. - **Figures** each have a `` and a plain-language `<desc>`, referenced by `aria-labelledby`, so the shape of the data is available without seeing the drawing. - **The table** uses a real `<caption>`, `<thead>`, and `scope` on both column and row headers. - The stack's decorative position counter is `aria-hidden`; all four cards are in the document and readable regardless of the deck's state. ### Dependencies - [GSAP 3.14.2](https://gsap.com/) core and **ScrollTrigger**. Nothing else, the progress thread is plain `stroke-dashoffset`, not a drawing plugin. - [Lenis 1.3.17](https://lenis.darkroom.engineering/) smooth scroll, **optional**. Remove the `lenis` block in `assets/script.js` and the CDN tag to drop it. While it is present it is wired to `ScrollTrigger.update`, without which the pinned stack jitters a frame behind, and `anchors: true` routes the spine's links through it. - Google Fonts: **Frank Ruhl Libre** (display), **Lora** (body), **Sofia Sans Condensed** (labels and chapter meta). `assets/script.min.js` is the minified build of `assets/script.js`. Edit the readable file and re-minify, or just point the `<script>` tag at `script.js`. ## 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 - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium template. The standard license costs £10 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Long-Form Story Template](https://gsapvault.com/templates/long-form-story-template) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](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