041
AI ready

Split-Screen Hero Handoff

£5

A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams.

ScrollTrigger Lenis advanced
7 more details
canvasvideo-backgroundpinningscrubstaggerpage-transitionvelocity-reactive
Split-Screen Hero Handoff - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Split-Screen Hero Handoff demo in new tab

About this effect

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 electric blue chase slats flash through before the destination content settles into view.

Read the full effect overview

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.

What's included

9 items
  • 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

Perfect for

5 use cases
  • Architecture studios opening from ambient film into a photograph-and-statement spread
  • 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

How it works

2 sections

One muted video remains the only decoded media source. Six narrow canvases draw adjacent cover-cropped slices from its current frame each tick, creating a synchronised 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. Scroll speed feeds a decaying response on the title and accent slats for a stronger reaction to hard wheel flicks. Mobile gets a shorter journey, and reduced motion replaces the entire pinned sequence with a paused, readable stacked layout.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 9 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Split-Screen Hero Handoff opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the effect to your <body>:

Code snippet omitted: it ships with the download.

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 </body>:

Code snippet omitted: it ships with the download.

Using It With Your Own Design

The required contract is [data-split-handoff], a stage, one hero containing one video, one canvas panel layer, and matching collections of panels, canvases, and accent slats. Use the same count for [data-split-panel], [data-split-canvas], and [data-split-slat]. The demo uses six, but the JavaScript derives its crop widths and centre-out order from however many you supply.

The practice copy, Mona Sans, the grey page and electric blue slats, the paper plates for the mark and the scroll cue, the photograph-and-statement spread beneath the film (.dest-*), and the .work list below the pin are demo art direction. Replace or delete them. The demo's spread photograph is baked from assets/img-manifest.json into assets/img/; swap it for your own image or delete the figure. The mechanic depends on the enhanced stage being viewport-height and clipped, every moving layer covering that stage, and the panel and slat grids using the same column count. Keep destination pre-hides gated under .has-js and restore them under reduced motion.

To change from six panels to four, use four panel/canvas pairs and four slats, then update both grids:

Code snippet omitted: it ships with the download.

Canvas pixel density is capped at 1.5x to keep six tall buffers affordable on mobile. The source video remains the only decoded media element.

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

Element Hooks

Hook Purpose
data-split-stage Viewport stage pinned by ScrollTrigger
data-split-hero Original full-bleed video layer used before the shutters separate
data-split-video One muted ambient video; never duplicated
data-split-panel-layer Grid holding the live canvas shutters
data-split-panel Independently translated wrapper for one video slice
data-split-canvas Canvas that draws one adjacent crop from the shared video
data-split-slat Matching accent column that chases its video shutter
data-split-title-half Optional title half pulled away from the seam
data-split-reveal Destination child that settles into place
data-split-cue Optional prompt faded after scrolling starts
data-split-progress Optional progress element scaled from 0 to 1

Swapping the Video

Use a short, silent 720p or 1080p MP4. Normal inter-frame video is fine because this effect lets the clip play naturally; unlike a video scrubber, it does not seek currentTime on every scroll update.

Code snippet omitted: it ships with the download.

Keep muted and playsinline on the video for mobile autoplay. The script catches autoplay rejection safely; the poster remains visible if playback is blocked.

Demo Footage License

The bundled demo film is an edited, colour-graded encode of “Corporate and business buildings in the city” from Mixkit, available under the Mixkit Free License. Source page: Corporate and business buildings in the city. Replace it with footage licensed for your project before using the demo commercially.

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.15.0+
  • ScrollTrigger

Optional:

  • Lenis 1.3.17+ for smooth scrolling

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.

Or browse effects, templates or UI elements.