# Stagger Grid Reveal
> 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.
Canonical: https://gsapvault.com/effects/stagger-grid-reveal
Live demo: https://gsapvault.com/demos/stagger-grid-reveal/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | scroll-reveal, stagger, grid-animation, 3d-transforms, load-sequence |
| Uses Lenis | No |
## Overview
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.
## Features
- 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
## Use Cases
- 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
## Vibe-Code Ready Setup
This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.
[How AI-assisted setup works](https://gsapvault.com/vibe-coding)
## 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().
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add your grid to ``:**
```html
OneTwoThreeFour
```
**3. Add before the closing `` tag:**
```html
```
The grid reveals when it enters the viewport and resets when it leaves backward.
### Options
| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-reveal-grid` | Flag | — | Initializes the container |
| `data-reveal-item` | Flag | — | Marks each animated child |
| `data-direction` | Direction below | `top-left` | Sets the stagger origin |
| `data-style` | Style below | `slide` | Sets the entrance treatment |
| `data-duration` | Seconds | `0.8` | Duration of each item tween |
| `data-stagger` | Seconds | `0.075` | Explicit delay between grid positions |
| `data-ease` | GSAP ease | `power3.out` | Reveal easing |
| `data-start` | ScrollTrigger position | `top 80%` | Viewport entry point |
| `data-end` | ScrollTrigger position | `bottom 20%` | Trigger end point |
| `data-once` | Flag | — | Prevents a revealed grid from replaying through scroll |
| `data-manual` | Flag | — | Disables ScrollTrigger for this grid |
| `data-autoplay` | Flag | — | Reveals a manual grid once after initialization |
| `data-hover-tilt` | Flag | — | Enables pointer and keyboard-focus tilt |
| `data-tilt-amount` | Degrees | `10` | Maximum pointer tilt |
#### Directions
`top-left`, `top-right`, `bottom-left`, and `bottom-right` create corner waves. `top`, `bottom`, `left`, and `right` move by axis. `center`, `edges`, and `random` provide non-linear sequences.
#### Styles
| Value | Treatment |
|---|---|
| `cinematic`, `mosaic` | Rotation, translation, scale, opacity, and blur |
| `fade` | Opacity |
| `slide`, `slide-up`, `slide-down`, `slide-left`, `slide-right` | Directional translation and opacity |
| `scale`, `scale-up` | Scale and opacity |
| `rotate` | Rotation, scale, and opacity |
| `blur` | Blur and opacity |
| `flip`, `flip-x` | 3D rotation and opacity |
| `clip`, `clip-left`, `clip-circle` | Clip-path reveal |
### Accessibility
- The JavaScript and CSS both respect `prefers-reduced-motion`; all items remain visible and static.
- Content is not hidden by CSS when JavaScript is unavailable.
- Pointer tilt is mirrored on keyboard focus and returns cleanly on blur.
- Use semantic buttons for controls and provide visible focus styles for focusable tiles.
- Reveal motion does not change reading order or remove content from the accessibility tree.
### Browser Support
Modern evergreen browsers with ES6 support. Clip styles require CSS `clip-path` support.
### Dependencies
- GSAP 3.14.2+
- ScrollTrigger 3.14.2+ for automatic viewport reveals
- No image assets or smooth-scroll library required
## What You Get
- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library
## Get the Code
This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.
- [Buy Stagger Grid Reveal](https://gsapvault.com/effects/stagger-grid-reveal)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)
## Judge the Code Quality First
These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):
- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress instrument with bar, ring, side rail, percentage, and active chapter feedback.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger.
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt