# Split-Screen Hero Handoff > A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams. Canonical: https://gsapvault.com/effects/split-screen-hero-handoff Live demo: https://gsapvault.com/demos/split-screen-hero-handoff/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | ScrollTrigger | | Techniques | canvas, video-background, pinning, scrub, stagger, page-transition, velocity-reactive | | Uses Lenis | Yes | ## Overview A cinematic split-screen hero transition that keeps one ambient video element intact while six lightweight canvas slices turn its current frame into independently animated shutters. Scroll pulls the title halves away from the central seam, sends alternating video columns up and down, and lets cobalt and orange chase panels flash through before the destination content settles into view. The effect is built as a hero handoff rather than a video scrubber: the film keeps playing naturally while ScrollTrigger controls the architecture around it. The final state is real semantic page content, and the pin releases into ordinary scrolling without a jump. ## Features - Single-video decoding with six synchronized canvas shutters - Alternating vertical panel exits that open upward and downward - Accent chase slats staggered directly behind the departing footage - Split headline travel with blur, letter-spacing, and opposing direction - Velocity-reactive title and slat skew with a smooth decaying settle - Configurable distance, mobile distance, scrub, stagger, spread, and velocity - Automatic video pause after the pinned section leaves the viewport - Fully reversible timeline with static reduced-motion and no-JavaScript layouts - Single-clock Lenis integration and complete effect teardown ## Use Cases - Architecture studios opening into a featured project statement - Fashion films handing into a collection or campaign story - Creative agencies transitioning from showreel footage into positioning copy - Venue and cultural sites revealing programme content beneath an ambient film - Product launches using macro video before the first specification section ## 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 One muted video remains the only decoded media source. Six narrow canvases draw adjacent cover-cropped slices from its current frame on the GSAP ticker, creating a synchronized live-film surface that can be separated into independent DOM shutters without running six videos. At the transition point the canvas surface replaces the original video in one frame, then a scrubbed timeline sends its columns beyond the stage in a centre-out order while matching accent slats follow a fraction later. The same timeline pushes the video inward, parts and blurs the two title halves, fills the progress rail, and reveals marked destination children. ScrollTrigger velocity feeds decaying quickSetter transforms on the title and accent slats for a stronger response to hard wheel flicks. gsap.matchMedia shortens the journey on mobile and replaces the entire pinned sequence with a paused, readable stacked layout under reduced motion. ## 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 beneath the film.

Look Up.

``` Keep the destination, accent slats, canvas panel layer, and original video hero in that order. Every canvas receives one adjacent cover-cropped slice from the same video frame. **3. Add before closing ``:** ```html ``` ### Options Set these attributes on `[data-split-handoff]`: | Attribute | Values | Default | Description | |---|---|---:|---| | `data-split-distance` | Number | `2.8` | Desktop pin distance in viewport heights | | `data-split-distance-mobile` | Number | `2.15` | Shorter mobile pin distance in viewport heights | | `data-split-scrub` | Number, including `0` | `0.55` | ScrollTrigger scrub smoothing in seconds | | `data-split-stagger` | Number | `0.035` | Delay between neighbouring shutters on the centre-out opening | | `data-split-spread` | Number | `72` | Opposing title travel as `xPercent` | | `data-split-velocity` | Number | `1` | Fine-pointer velocity smear strength; set `0` to disable | ### Accessibility - The ambient video and shutter geometry are decorative and `aria-hidden`; keep meaningful headings and destination copy in HTML. - Reduced-motion visitors get no pin, autoplay, clip animation, or panel travel. The poster hero and destination render as readable stacked sections. - Without JavaScript, the same stacked layout remains visible and the canvas shutter layer is never shown. - Native wheel, touch, Page Down, Space, and arrow-key scrolling remain available. - Links in the destination stay `visibility: hidden` until revealed, preventing focus from entering covered content. - The script pauses the video after the pinned section leaves the viewport. ### 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 Split-Screen Hero Handoff](https://gsapvault.com/effects/split-screen-hero-handoff) - [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