Stagger Grid Ripple — Free GSAP Grid Stagger Snippet

A stagger is usually a one-dimensional idea — item 3 starts after item 2. GSAP's advanced stagger object makes it *spatial*: tell it your targets form an 8×14 grid, name any dot as the origin, and delays are computed from true 2D distance, so one tween ripples outward like a stone dropped in water. This snippet wires that to clicks — the wave radiates from exactly the dot you touched — using only core GSAP, no plugins.

grid: [rows, cols] gives the stagger geometry

By default, staggered delays follow DOM order — a raster sweep, left-to-right, top-to-bottom. Passing stagger: { grid: [8, 14] } tells GSAP the flat target list is actually a grid, and from then computes each element's delay from its *Euclidean distance* to the origin. Corner dots of a ring start together; diagonals arrive later than orthogonals by exactly √2 — the circular wavefront you see is that distance math made visible.

from accepts an index, and that's the interaction

from takes keywords ('center', 'edges', 'random', 'start') *or a target index*. The click handler reads the dot's index and passes it straight in — that's the entire mechanism for "the ripple starts where you clicked." No coordinate math, no distance loops: one number changes the wave's epicenter. The load-time burst uses 'center'; try 'edges' for an inward-collapsing wave.

keyframes make each dot's journey rich

Each dot doesn't just scale once — it plays a three-act sequence: pop large and indigo, compress small and cyan, then settle home with an elastic.out wobble. The keyframes array defines that per-target timeline inside a single tween, and the stagger offsets each dot's *entire sequence*. Multi-phase-per-target × distance-offset is what separates a living ripple from a scale pulse.

overwrite: true lets waves interrupt waves

Click twice fast and the second ripple needs to take over dots mid-animation. overwrite: true kills any prior tweens on each target the moment the new tween touches it — so overlapping waves hand off cleanly instead of compounding transforms. This is the built-in, per-target version of the killTweensOf idiom, and it's what makes the demo feel like a toy you can drum on.

each vs amount, the pacing choice

each: 0.035 fixes the delay *per unit of grid distance* — bigger grids take proportionally longer to traverse. The alternative, amount, fixes the *total* spread and divides it, keeping overall duration constant regardless of grid size. For click-toys, each feels more physical (waves have a speed); for choreographed intros, amount keeps scenes on schedule.

112 dots is nothing — because of what's animated

Scale and background-color on absolutely tiny elements, driven by one tween object: the per-frame cost is GSAP updating transforms, which comfortably handles thousands of targets. The dots are generated by a loop, so ROWS/COLS scale the field freely.

Customizing it

Animate y for a fabric-like bulge, switch from: 'random' for sparkle, or drive ripples from keypresses. Related: distance-staggered entrances in scroll reveal grid, assembling tiles in scroll tile assemble, ambient fields in flickering grid, and dot backdrops in dot pattern.