Anime.js Ripple Grid — Grid Stagger Animation Snippet

Most stagger animations are one-dimensional: a list animates top to bottom, each item delayed a little more than the last. That works because a list has one axis. A grid has two, and the moment you want a wave to radiate *outward from a point* rather than sweep in one direction, the naive per-index delay falls apart — index order runs left to right, row by row, so a "ripple" ends up looking like a typewriter.

This snippet uses anime.js's anime.stagger() with its grid option, which is the single most useful feature in the library and the reason it is still worth reaching for in 2026. You click a tile, and the animation radiates from that tile in a true circular wave.

The grid stagger, and why it needs two numbers

The whole effect is one property:

delay: anime.stagger(58, { grid: [COLS, ROWS], from: from })

Passing grid: [16, 10] tells anime.js to stop treating the target list as a flat array and start treating it as a 16×10 matrix. Internally it converts each target's array index into an (x, y) coordinate, computes the Euclidean distance from that coordinate to the origin point, and multiplies that distance by the base value of 58ms. Tiles equidistant from the click fire at the same moment, which is exactly what produces a circular wavefront instead of a diagonal sweep.

The from value accepts either a keyword — 'first', 'center', 'last' — or a numeric index, and the numeric form is what makes this interactive. The click handler finds which tile was hit and passes its index straight through:

ripple(Array.prototype.indexOf.call(tiles, tile))

tiles is a NodeList, not an array, so it has no .indexOf. Borrowing Array.prototype.indexOf with .call() is the compact fix; Array.from(tiles).indexOf(tile) works too but allocates a new array on every click.

Keyframe arrays, not single values

Each animated property is an array of keyframes rather than a single target value:

scale: [{ value: 0.18, duration: 380, easing: 'easeOutSine' }, { value: 1, duration: 1150, easing: 'easeInOutQuad' }]

This is what gives the wave a body. A single scale: 0.18 would shrink every tile and leave it shrunk. The two-stage form makes each tile collapse fast (380ms, ease-out so it snaps away) and then recover slowly (1150ms, ease-in-out so it settles). Because the collapse is roughly a third the duration of the recovery, at any given moment you see a tight bright ring of collapsed tiles chasing a wide field of tiles still easing back — a wavefront with a trailing edge, not a uniform pulse.

backgroundColor and borderRadius are keyframed on the same schedule, so a tile simultaneously shrinks, turns indigo, and rounds to a circle at the crest of the wave, then squares off and fades back to slate as it recovers. Animating three properties in lockstep is what sells it as a physical ripple rather than a scale tween.

The gotcha: killing in-flight tweens

The first line of ripple() is anime.remove(tiles), and it is not optional. anime.js queues animations per target, so clicking twice in quick succession without it stacks two competing tweens on every tile. They fight over scale, and tiles routinely end up stranded at 0.18 with no animation left to restore them — a grid permanently pockmarked with shrunken squares. anime.remove() cancels anything currently animating those targets so each click starts from a clean slate. This is the most common anime.js bug in interactive work and it is one line to avoid.

Building the grid

The tiles are generated in JavaScript rather than hand-written in HTML, appended through a DocumentFragment so 160 elements cause a single reflow instead of 160. The column count is pushed to CSS as a custom property (grid.style.setProperty('--cols', COLS)) and consumed by grid-template-columns: repeat(var(--cols), 1fr), so COLS is defined once in JS and the layout follows automatically. Tiles use aspect-ratio: 1 so they stay square at any container width, and will-change: transform promotes them so the scale animation runs on the compositor.

Reusing it

Change COLS and ROWS and everything else adapts. Point the click handler at real data — a heatmap cell, a seat in a picker, a calendar day — and the ripple becomes selection feedback that shows *where* the user touched rather than just *that* they touched. Pair it with a stagger grid ripple for a CSS-only variant, or an activity heatmap if the grid needs to carry values.