# Scroll Image Sequence > Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress. Canonical: https://gsapvault.com/effects/scroll-image-sequence Live demo: https://gsapvault.com/demos/scroll-image-sequence/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | ScrollTrigger | | Techniques | scrub, canvas, pinning, image-sequence, mask-reveal, scroll-storytelling | | Uses Lenis | Yes | ## Overview A cinematic scroll-driven image sequence effect that draws numbered frames to a responsive canvas while one GSAP timeline expands a viewing aperture, crossfades story chapters, and tracks progress. ScrollTrigger pins only for the configured journey and keeps every response fully reversible. ## Features - Canvas-cover frame rendering without image distortion - Configurable rounded mask that expands to full bleed - Timeline-synchronized chapter crossfades with a persistent final state - Transform-based journey progress and restrained atmosphere layers - Automatic preloading with live status and nearest-frame fallback - HiDPI canvas sizing with debounced responsive refresh - Shorter mobile scroll distance using the same real frame sequence - Representative-frame reduced-motion and no-JavaScript fallbacks - Single-clock Lenis and ScrollTrigger integration with complete cleanup ## Use Cases - Architectural approach sequences with location-based storytelling - Product launches with controlled full-bleed reveals - Travel editorials with coordinate and chapter overlays - Automotive or aerospace sequences with scrubbed rendered frames - Portfolio case studies that need reversible cinematic playback ## 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 The effect preloads a configurable numbered image set and uses a GSAP timeline with ScrollTrigger scrub to animate a frame-index object from the first frame to the last. Each update draws the nearest available image into a HiDPI canvas using a centered cover crop, while optional mask, hero, chapter, progress, and atmosphere elements share the same normalized timeline. The section pins for the supplied desktop or mobile distance and releases as soon as the sequence reaches its final frame. Reduced-motion visitors receive a representative static frame without pinning, and a real fallback image keeps essential content visible when JavaScript is unavailable. ## 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. Add to your HTML ``:** ```html ``` **2. Add the effect markup to your ``:** ```html
Describe the representative frame
Opening content

Chapter title

Chapter copy.

Final chapter

This chapter remains visible at the end.

``` Keep a real fallback `` beneath the canvas. It supplies the no-JavaScript state and prevents a blank stage while frames load. **3. Add before the closing `` tag:** ```html ``` Lenis is optional. If present, the effect connects Lenis and ScrollTrigger to the same GSAP ticker. Set `data-smooth="off"` on `` or use `?smooth=off` to disable it. ### Options | Attribute | Values | Default | Description | |---|---|---:|---| | `data-image-sequence` | — | — | Marks each sequence container (required) | | `data-frame-path` | Relative or root-absolute URL | `/assets/frames/frame_` | Path and filename prefix before the padded number | | `data-frame-count` | Integer | `120` | Number of frames to preload | | `data-frame-pad` | Integer | `3` | Number width; `3` produces `001` | | `data-frame-ext` | `.jpg`, `.png`, `.webp` | `.jpg` | Frame extension, including the dot | | `data-scroll-length` | ScrollTrigger end value | `300%` | Desktop pin/scrub distance | | `data-scroll-length-mobile` | ScrollTrigger end value | `220%` | Optional shorter distance at 768px and below | | `data-scrub` | Number, including `0` | `0.5` | ScrollTrigger scrub smoothing | | `data-mask` | `true`, `false` | `false` | Animates `[data-mask-viewport]` from the CSS aperture to full bleed | | `data-chapters` | `true`, `false` | `false` | Enables timed `[data-chapter]` overlays | | `data-chapter-start` | `0`–`1` | Based on order | Chapter fade-in point on the sequence | | `data-chapter-end` | `0`–`1` | Start + `0.2` | Chapter fade-out point; use `1` to keep the final chapter visible | #### Frame paths in local and public builds The script uses `data-frame-path` exactly as supplied: - `/assets/frames/frame_` resolves from the site/public root and requests `/assets/frames/frame_001.jpg`. - `assets/frames/frame_` resolves relative to the page URL, which is useful when frames ship beside a standalone page. - A CDN URL such as `https://cdn.example.com/flight/frame_` works without rewriting. The fallback image should use the same deployment strategy as the sequence frames. ### Accessibility - The canvas is decorative; provide meaningful `alt` text on the representative fallback image. - Keep essential location, product, or story context in ordinary HTML, as the demo does with `.static-context`. - The loading element uses `aria-live="polite"` and is hidden after preloading completes. - Under `prefers-reduced-motion: reduce`, the effect does not pin or scrub. It draws a representative middle frame and leaves static context visible. - Without JavaScript, the fallback image and static context remain visible, so the section is never blank. - This scroll-driven effect has no custom pointer-only controls; normal keyboard and assistive scrolling continue to work. ### Dependencies **Required:** - GSAP 3.14.2+ - ScrollTrigger **Optional:** - Lenis 1.3.17+ for smooth scrolling ## 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 Image Sequence](https://gsapvault.com/effects/scroll-image-sequence) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](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 instrument with bar, ring, side rail, percentage, and active chapter feedback. - [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 separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt