# Scroll Sequence Hero Transition > A scroll-scrubbed canvas sequence that lifts into real page content, with Editorial, Serif, and Mono visual presets. Canonical: https://gsapvault.com/effects/scroll-sequence-hero-transition Live demo: https://gsapvault.com/demos/scroll-sequence-hero-transition/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | ScrollTrigger | | Techniques | image-sequence, canvas, pinning, scrub, page-transition, velocity-reactive | | Uses Lenis | Yes | ## Overview A cinematic hero-to-content transition that scrubs a numbered image sequence on canvas, then turns the entire hero into a moving sheet that lifts away to reveal the page beneath. ScrollTrigger keeps the frame playback, type departure, accent chase layer, content entrance, and final pin release on one fully reversible timeline. Unlike a chapter-based image sequence, this effect is built specifically for the opening handoff: the animation does not end on another frame, it resolves into a usable content section and normal document scrolling. ## Features - Canvas-cover playback for any numbered image sequence - Three switchable visual presets: Editorial, Serif, and Mono - Two-layer hero exit with a theme-aware colour chase sheet - Real destination content revealed beneath the moving hero - Velocity-reactive type skew and blur that settles back to crisp - Responsive HiDPI canvas rendering with nearest-frame fallback - Separate desktop and mobile pin distances through data attributes - Reversible ScrollTrigger timeline with a seamless pin release - Static reduced-motion and no-JavaScript reading modes - Single-clock Lenis integration with complete teardown ## Use Cases - Campaign homepages that need a cinematic opening and a clean route into the message - Culture and travel editorials transitioning from atmosphere into an article lead - Product launches that turn rendered footage into the first feature section - Portfolio heroes handing a visual reel into project details - Architecture and destination sites opening with an approach sequence ## 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 numbered image set and maps a GSAP playhead object to ScrollTrigger progress. Each update draws the nearest available frame to a responsive HiDPI canvas with a centred cover crop, while the same timeline pushes the footage forward and scales the progress rail. Theme controls update one data-theme value, letting CSS swap typography, colour, image treatment, and geometry without rebuilding the animation. Near the end of the pinned journey, the hero sheet translates beyond the top edge and exposes a solid chase sheet beneath it. That second sheet follows with a short overlap, revealing ordinary semantic content already positioned in the stage; its marked children rise into place before the pin releases. Scroll velocity feeds a decaying type skew and CSS blur on fine pointers, while gsap.matchMedia provides a shorter touch journey and an unpinned static reduced-motion layout. ## 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 to your ``:** ```html

Your next section

Real semantic content revealed by the handoff.

Your hero

Scroll to enter

``` Keep the destination, chase sheet, and hero in that stacking order. Theme controls are optional; omit the switcher when shipping one chosen direction. The fallback image prevents a blank hero while frames load and supplies the no-JavaScript state. **3. Add before closing ``:** ```html ``` ### Options Set these attributes on `[data-sequence-handoff]`: | Attribute | Values | Default | Description | |---|---|---:|---| | `data-theme` | `editorial`, `serif`, `mono` | `editorial` | Initial typography and design preset | | `data-frame-path` | Relative, root-relative, or CDN prefix | `/assets/frames/frame_` | Path and filename prefix before the padded frame number | | `data-frame-count` | Integer | `120` | Number of sequence frames | | `data-frame-pad` | Integer | `3` | Filename number width; `3` creates `001` | | `data-frame-ext` | `.jpg`, `.png`, `.webp` | `.jpg` | Frame extension, including the dot | | `data-scroll-length` | Number | `3.2` | Desktop scroll distance in viewport heights | | `data-scroll-length-mobile` | Number | `2.35` | Mobile scroll distance in viewport heights | | `data-scrub` | Number, including `0` | `0.45` | ScrollTrigger scrub smoothing in seconds | | `data-velocity` | Number | `1` | Desktop type smear strength; use `0` to disable | ### Accessibility - The canvas is decorative. Put meaningful `alt` text on the fallback image. - Destination content remains ordinary semantic HTML in reading order. - `prefers-reduced-motion: reduce` removes pinning and scrubbing, showing a static representative hero followed by the destination. - Without JavaScript, the hero and destination become normal stacked sections and all reveal targets remain visible. - Scrolling stays native and keyboard-operable; there are no pointer-only controls. - Preset controls are real buttons with `aria-pressed` state and visible focus styling. - Keep links and buttons as real interactive elements with visible focus styles. ### 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 Sequence Hero Transition](https://gsapvault.com/effects/scroll-sequence-hero-transition) - [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