# Scroll Story Flow > Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. Scroll down through three expressive scenes. Canonical: https://gsapvault.com/effects/scroll-story-flow Live demo: https://gsapvault.com/demos/scroll-story-flow/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger, CustomEase | | Techniques | pinning, horizontal-scroll, text-animation, scrub, clip-path, parallax | | Uses Lenis | Yes | ## Overview A photographic scroll story with three substantial pinned moments. Each scene holds the viewport while a single-line sentence travels horizontally, then releases into the next section of the page. Six photographs pair architecture, craft and landscape with orange, blue and mint typography. The photographic frame keeps expanding until it fills the viewport beneath the text. Image wipes and parallax follow the same scroll, with a graduated shade preserving readability. Custom easing gives the travel a deliberate acceleration and settle, and reverse scrolling retraces the sequence. ## Features - Three pinned scenes within a vertical page - Oversized single-line sentences that travel across the viewport - Two photographs per scene with a scroll-driven image wipe - Photographs expand to fill the viewport underneath the travelling text - Image parallax and expanding crops on the same timeline - CustomEase curves for text travel, image reveals and settling - Measured text distance that adapts to viewport and font changes - Per-scene direction, pin distance and velocity lean options - Responsive pinned motion plus a readable static reduced-motion layout ## Use Cases - Brand stories with a continuous reading flow - Agency case studies with expressive chapter headings - Manifesto pages with room for each thought - Editorial introductions with a changing colour rhythm - Product narratives with progressively revealed benefits ## Vibe-Code Ready Setup This effect 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 ScrollTrigger pins each scene while its sentence moves across the viewport. The horizontal travel adapts to the length of each sentence, so the whole line passes through the frame however long it runs. A shared timeline controls the picture changeover, expanding crop and image parallax. CustomEase shapes the movement while a numeric scrub follows the visitor’s scroll position. ## Documentation How this effect 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 **1. Add to your HTML ``:** _Code snippet omitted: it ships with the download._ **2. Add sections to your ``:** _Code snippet omitted: it ships with the download._ **3. Add before closing ``:** _Code snippet omitted: it ships with the download._ ### Using It With Your Own Design Each `[data-story-flow]` owns one `[data-story-stage]`, one `[data-story-line]` and one `[data-story-frame]`. Put two `[data-story-picture]` figures inside the frame, each with an image. One picture also works, with no changeover. Keep the outer section height-free: ScrollTrigger supplies pin spacing. The script adds `.is-story-live` only when the motion setup succeeds. That class makes the stage one viewport tall, puts the sentence on a single line, and stacks the photographs. Keep those structural rules, the clipping on the stage/frame, and the line's `width: max-content`. The script measures the line after fonts load and again when the viewport changes. The text stays intact and can include emphasis; it is not split or replaced. The header labels, three colour themes, body copy and photography are demo content. Replace them freely. The sentence should be wider than the viewport for meaningful travel. Its resting left/right clearance is 6% of the stage width; keep the `.story-type-window` padding in step with the script's `inset()` if changing that clearance. Base styles form a normal photo essay, with wrapped headlines and both pictures visible. Preserve that base layout: it is used without JavaScript, after teardown, and under reduced motion. Avoid putting links or controls inside the moving line or overlapping pictures; place controls in the static section copy instead. ### Options | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-story-flow` | Present | — | Owns one pinned scene. | | `data-story-stage` | Present | — | The viewport-sized element to pin. | | `data-story-line` | Present | — | The intact single-line heading that travels horizontally. | | `data-story-frame` | Present | — | Clipped image frame. | | `data-story-picture` | Present | — | Photo layer; the second wipes upward over the first. | | `data-story-direction` | `left`, `right` | `left` | Direction the sentence travels during forward scrolling. | | `data-story-distance` | `100`–`600` | `220` | Minimum pin distance as a percentage of viewport height. Longer sentences can extend it automatically. | | `data-story-lean` | `0`–`6` | `2` | Maximum additional velocity skew in degrees; `0` disables it. | | `data-smooth` | `off` | Enabled if Lenis is loaded | Set on `` to disable optional smoothing. `?smooth=off` also works. | ### Easing and Scroll Timing `storyGlide` is a CustomEase curve (`0.25,0.18,0.32,1`) that starts the sentence moving immediately, then accelerates and eases into its landing. `storyUnfold` (`0.16,1,0.3,1`) opens the photo crop and settles the velocity response. Without CustomEase, the script uses built-in GSAP eases. The sentence starts moving as soon as the pin engages, with a small reading beat only at the end. The photo frame grows from its initial inset to fill the viewport across the pin. The second image wipes in across the middle of the timeline, while both images slowly shift and scale inside their crops. Text sits above the imagery; a viewport-aligned shade rises as the photograph reaches it. The numeric scrub (`0.55`) softens changes in scroll position without playing an independent timed slideshow. Reverse scrolling reverses the same sequence. ### Accessibility Reduced motion uses the static photo essay: no pinning, horizontal text clipping or smooth scrolling. Both photographs and the full wrapped sentence are available. Changing the preference live reverts or recreates the animation. Without JavaScript or GSAP, the original page remains readable. Headings keep their semantic markup and images have descriptive alt text. Keyboard scrolling works with the document; the effect adds no arrow-key controls or slide navigation. As photographs expand behind the text, a graduated shade protects the heading and supporting copy. The lower-right image area stays clear. ### Photography The demo includes six locally optimised WebP photographs: architecture, ceramics, a loom, shoreline and forest. Sources are recorded in `assets/img-manifest.json` using the project's curated stock library. Replace the files and alt text with your own images when adapting the story. Explicit image dimensions reserve the layout without waiting for downloads. ### Dependencies - GSAP 3.15.0 and ScrollTrigger; compatible with GSAP 3.12+. - CustomEase for the supplied curves, with built-in easing fallbacks. - Lenis 1.3.17, optional. - Mona Sans from Google Fonts in the demo; a system sans-serif fallback is provided. ## 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 is a premium effect. The standard license costs £5 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 Scroll Story Flow](https://gsapvault.com/effects/scroll-story-flow) - [The Vault (£99 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage. - [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt