webdevpuneet.com

Related Snippets

175 in Animations category
1–6 of 60

Matter.js Ball Pit Hero Section

Matter.js Rope Bridge You Can Cut

Matter.js Soft-Body Jelly Blobs

Matter.js Drag-and-Throw Physics Playground

Matter.js Newton's Cradle (Drag to Swing)

Rough.js Sketchy Annotation Highlight

Anime.js Stagger Grid — Free Grid-Aware Stagger Animation Snippet

Anime.js Stagger Grid · Animations · Plain HTML, CSS & JS · Live preview

CategoryAnimations
TagsText EffectsMicro-InteractionsCSS GridJS Libraries

Copy & paste

Source Code

Requires
JS · anime.min.js
<section class="ag-wrap">
  <div class="ag-head">
    <h1>Anime.js Stagger Grid</h1>
    <p>A grid-aware stagger that ripples outward from the center tile.</p>
    <button class="ag-btn" id="agReplay">Replay animation</button>
  </div>
  <div class="ag-grid" id="agGrid">
    <div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div>
    <div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div>
    <div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div>
    <div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div>
    <div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div><div class="ag-tile"></div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Grid-aware stagger
Delay derives from real row/column distance.
Center-out ripple
from: 'center' concentrates the wave in the middle.
Three properties in one call
Scale, opacity, and radius animate together.
Dot-to-square morph
borderRadius eases from 50% to 12px.
Punchy easing
easeOutExpo pops fast, settles smooth.
Replayable
A button re-runs the same animation on demand.
CDN-only setup
One script tag, no bundler required.
Responsive grid
CSS grid columns adapt independent of the stagger math.

About this UI Snippet

Anime.js Stagger Grid — Tiles That Ripple Outward From the Center

Screenshot of the Anime.js Stagger Grid snippet rendered live

The stagger grid is the moment a dashboard, portfolio, or landing section feels alive instead of static — every tile appearing on its own beat rather than all at once. This snippet builds it with anime.js loaded from a CDN, using its grid-aware anime.stagger helper so the delay between tiles is computed from their actual row and column position rather than their order in the DOM. It's a close cousin of scroll reveal grid, but driven by a click or page-load trigger instead of scroll position, and by anime.js's own timing engine instead of GSAP.

Grid-aware stagger, not list-aware stagger

A plain anime.stagger(60) just adds 60ms per element in DOM order, which reads as a diagonal-ish line at best. Passing grid: [5, 5] tells anime.js the tiles form a five-by-five layout, so it can compute each tile's real (row, column) coordinates and derive delay from actual 2D distance. Combined with from: 'center', the delay is shortest for the middle tile and grows outward in concentric rings — a ripple, not a sweep.

One targets array, three animated properties

The single anime({...}) call animates scale, opacity, and borderRadius together across all 25 tiles. Starting scale at 0 and borderRadius at 50% means every tile begins as an invisible dot and blooms into a rounded square, which reads as more purposeful than a flat fade. easeOutExpo gives each tile a fast pop that settles gently, matching the punchy feel of the ripple.

Replayable on demand

playGrid() is a plain function called once on load and again from the "Replay animation" button, so anime.js's timeline is simply recreated each time rather than manually reversed — the simplest way to make a one-shot stagger repeatable without managing timeline state.

Where this pattern fits

Use it for onboarding checklists, dashboard widget grids, icon/feature grids, or a gallery of thumbnails that should feel choreographed on first paint. It pairs naturally with bento grid layouts and with stagger list when you need the same ripple treatment for a single column instead of a grid.

Customizing it

Change the grid dimensions to match your actual column/row count (a mismatch will still stagger, just not accurately), switch from to 'first', 'last', or a specific index, or swap the animated properties for a rotation or color shift. Anime.js also supports staggering duration and delay independently, so tiles further from center can take visibly longer as well as start later.

Step by step

How to Use

  1. 1
    Add the anime.js CDNInclude anime.min.js from the CDN panel.
  2. 2
    Paste HTML, CSS, and JSA 25-tile grid renders, hidden and scaled to zero.
  3. 3
    Watch it loadTiles pop in, rippling outward from the center.
  4. 4
    Click "Replay animation"The stagger runs again from a clean state.
  5. 5
    Adjust grid dimensionsMatch anime.stagger's grid option to your layout.
  6. 6
    Change the originSwap from: 'center' for 'first', 'last', or an index.

Real-world uses

Common Use Cases

Dashboard first paint
Stagger a widget grid on first load so each tile lands on its own beat. Delays come from real row and column distance, so the ripple spreads outward from the centre tile.
Bento feature sections
Pair with bento grid tiles so a feature section assembles itself instead of appearing all at once, with scale, opacity and radius animated in one call.
Onboarding checklists
Reveal setup steps in a ripple rather than a flat fade, giving new users a gentle sense of progress as the list builds in front of them.
Gallery thumbnails
Pop thumbnails in from the centre outward. The dot-to-square morph, borderRadius easing from 50% to 12px, makes each tile feel as if it is being placed.
Grid cousin of the stagger list
Use it where a stagger list is too linear. Three properties animate in a single anime.js call, and agReplay re-runs it so you can demo the timing.
Related: Anime.js Ripple Grid
See the Anime.js Ripple Grid for a related animations pattern worth pairing with this one.
Related: Cursor Circle Image Reveal
See the Cursor Circle Image Reveal for a related animations pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

It tells anime.js the targets form a 5-column by 5-row layout, so instead of using DOM order to compute each element's delay, it derives each tile's (row, column) coordinates and bases the delay on real 2D distance from the stagger's origin. Without it, anime.stagger just adds a fixed increment per element in list order, which produces a much flatter, less choreographed motion.

It sets the distance-zero point at the grid's middle tile (or the closest tile to center for an even grid), so every other tile's delay grows with its distance from that point. Tiles equidistant from the center animate at the same time, producing expanding concentric rings rather than a corner-to-corner sweep.

Because the animation starts every tile at scale: 0 and opacity: 0, simply re-running anime({...}) on the same targets restarts them from that same visual state — anime.js overwrites the in-progress or completed animation on those targets. That's simpler than keeping a timeline reference around and calling reverse(), and it works identically whether the grid finished, is still running, or was never played.

It should for accurate spacing — 25 tiles with grid: [5, 5] gives each tile a unique, correct coordinate. If the grid option doesn't match the actual tile count, anime.js still staggers using whatever grid you specify, but the computed distances no longer line up with the visual layout, so the ripple can look uneven or clipped at the edges.

Yes. anime.stagger() can be passed to the duration property too, not just delay, so tiles further from the origin can take measurably longer to complete as well as start later — for example duration: anime.stagger(400, { start: 600, grid: [5, 5], from: 'center' }) makes the ripple's edges feel like they're drifting to a stop rather than snapping in place.