Scroll Sequence Hero Transition
A scroll-scrubbed canvas sequence that lifts into real page content, with Editorial, Serif, and Mono visual presets.
About This Effect
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.
Read the full effect overview
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.
What's Included
- 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
Perfect For
- 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
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.