Back to Gallery
Scroll Image Sequence
£5 Standard License Unlimited projects
Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress.
About This Effect
A cinematic scroll-driven image sequence effect that draws numbered frames to a responsive canvas while one GSAP timeline expands a viewing aperture, crossfades story chapters, and tracks progress. ScrollTrigger pins only for the configured journey and keeps every response fully reversible.
What's Included
- Canvas-cover frame rendering without image distortion
- Configurable rounded mask that expands to full bleed
- Timeline-synchronized chapter crossfades with a persistent final state
- Transform-based journey progress and restrained atmosphere layers
- Automatic preloading with live status and nearest-frame fallback
- HiDPI canvas sizing with debounced responsive refresh
- Shorter mobile scroll distance using the same real frame sequence
- Representative-frame reduced-motion and no-JavaScript fallbacks
- Single-clock Lenis and ScrollTrigger integration with complete cleanup
Perfect For
- Architectural approach sequences with location-based storytelling
- Product launches with controlled full-bleed reveals
- Travel editorials with coordinate and chapter overlays
- Automotive or aerospace sequences with scrubbed rendered frames
- Portfolio case studies that need reversible cinematic playback
How It Works
The effect preloads a configurable numbered image set and uses a GSAP timeline with ScrollTrigger scrub to animate a frame-index object from the first frame to the last. Each update draws the nearest available image into a HiDPI canvas using a centered cover crop, while optional mask, hero, chapter, progress, and atmosphere elements share the same normalized timeline.
The section pins for the supplied desktop or mobile distance and releases as soon as the sequence reaches its final frame. Reduced-motion visitors receive a representative static frame without pinning, and a real fallback image keeps essential content visible when JavaScript is unavailable.
Plugins ScrollTrigger
Difficulty Intermediate
Smooth Scroll Lenis Integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
