Back to Gallery
Stagger Grid Reveal
£5 Standard License Unlimited projects
Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt.
About This Effect
A cinematic grid reveal effect that turns modular campaign layouts, portfolios, and product collections into art-directed entrance sequences. GSAP calculates each wave from the rendered grid, then combines directional staggering with rotation, scale, translation, opacity, and blur before every tile lands cleanly.
What's Included
- Corner, center, edge, axis, and random stagger origins
- Cinematic and mosaic presets combining five motion channels
- Fourteen portable reveal styles including slide, flip, clip, scale, and blur
- Generic replay and direction controls powered by documented data attributes
- ScrollTrigger mode plus manual autoplay and programmatic triggering
- Pointer tilt mirrored by keyboard focus for accessible interaction
- Responsive grid measurement that adapts to real two-column mobile layouts
- Reduced-motion, no-JavaScript, event cleanup, and instance destruction safeguards
Perfect For
- Campaign mosaics with a bold page-load signature
- Portfolio grids that need an art-directed first impression
- Product collections with directional category transitions
- Editorial galleries with center-out or diagonal sequencing
- Event and festival lineups with replayable reveal controls
How It Works
Each item marked with data-reveal-item is measured against its CSS grid at trigger time. The selected direction becomes a GSAP grid stagger origin, while the chosen style supplies the hidden and resting states; the cinematic preset layers translation, rotation, scale, opacity, and blur into one controlled eruption. ScrollTrigger can reveal the grid on entry, or data-manual can hand control to autoplay, buttons, and the exposed StaggerGridReveal API. All listeners and tweens are owned by the instance and removed by destroy().
Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
