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.
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 cobalt and orange chase panels 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
- 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
- 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
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.