010
AI ready

Stagger Grid Reveal

£5

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.

ScrollTrigger intermediate
5 more details
scroll-revealstaggergrid-animation3d-transformsload-sequence
Stagger Grid Reveal - GSAP animation effect preview

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Stagger Grid Reveal demo in new tab

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

8 items
  • 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

5 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

How it works

1 section

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

Lighthouse, as measured

Google Lighthouse on this effect's demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Stagger Grid Reveal opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£5 Standard license, unlimited projects

Browse free effects

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add your grid to <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

The grid reveals when it enters the viewport and resets when it leaves backward.

Using It With Your Own Design

The effect requires only a container with data-reveal-grid and child elements marked data-reveal-item. Your container should use CSS Grid; column count, gaps, colors, typography, content, and tile proportions are entirely yours. The .work-index, .card, and .card__field rules in the demo are presentation CSS and can be deleted.

Do not pre-hide items with unconditional CSS. The script applies the selected start state during initialization, so content remains visible when JavaScript is unavailable. Flip and focus-tilt designs benefit from perspective on the grid and transform-style: preserve-3d on items. If items can receive keyboard focus, provide a visible :focus-visible outline.

CSS in your stylesheet:

Code snippet omitted: it ships with the download.

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

Replay and Preset Controls

Controls are optional. data-target must match the grid's id.

HTML in <body>:

Code snippet omitted: it ships with the download.

data-direction-control updates the direction and replays the target. data-replay-control repeats its current setup. A button with data-style-control, data-target, and data-style changes the target style and reveals it. Direction controls automatically update aria-pressed; listeners are removed during context cleanup.

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.15.0+
  • ScrollTrigger 3.15.0+ for automatic viewport reveals
  • No image assets or smooth-scroll library required

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.

Related articles

Shopify custom animations with GSAP

Add GSAP animations to a Shopify theme: where the code goes, how to survive theme editor section reloads, and a scroll-reveal collection grid.

GSAP with React: useGSAP, ScrollTrigger and proper cleanup

Learn how to use GSAP in React with useGSAP, scoped selectors, ScrollTrigger cleanup, Strict Mode, Next.js, and reduced-motion support.

GSAP performance: why animations get janky and how to fix it

A GSAP performance guide: keep tweens on the compositor, batch ScrollTriggers, sync smooth scroll to one clock, and stop pinned sections jumping.

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.