Scroll Image Sequence
Apple-style scroll-driven image sequence that plays through frames on a canvas element. Pin the viewport and scrub through cinematic visuals.
About This Effect
A cinematic scroll-driven image sequence effect that draws pre-rendered frames to a canvas element as the user scrolls. Uses GSAP ScrollTrigger's scrub feature to pin the viewport and map scroll progress to frame index, creating the same frame-by-frame playback technique used on Apple product pages.
What's Included
- Canvas-based frame rendering for smooth playback
- ScrollTrigger pinning with configurable scroll length
- Automatic image preloading with progress indicator
- HiDPI / Retina canvas rendering
- Configurable via data attributes (frame path, count, padding, scrub)
- Reduced motion support — shows first frame statically
- Responsive canvas sizing with debounced resize
- Lenis smooth scroll integration
Perfect For
- Product reveal sequences on landing pages
- Architectural walkthroughs and 360° object views
- Cinematic storytelling sections with drone footage
- Interactive explainer sequences for SaaS or hardware products
- Portfolio hero sections with scrubbed video content
How It Works
The effect preloads an array of numbered image frames, then uses gsap.to() with ScrollTrigger scrub to animate a frame index object from 0 to frameCount-1. On each update, the corresponding image is drawn to a <canvas> element. The container is pinned during playback so the user scrolls through the full sequence before the page continues.