Skip to main content
The stagger() function generates staggered delays for multiple animated elements, allowing you to create wave-like or cascading animation effects.

​
Syntax

stagger(value, params)

​
Parameters

​
value
number | string | [number, number] | [string, string]
required
The delay value or range to distribute across elements:
  • Single value: Same delay increment for each element
  • Array range: Interpolates between start and end values
  • Supports units like ‘ms’, ‘s’, etc.
​
params
object
Configuration options for stagger behavior:

​
Returns

A stagger function that calculates delays for each target element.

​
Examples

​
Basic Stagger

Apply a 100ms delay increment between elements: 
anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger(100) // 0ms, 100ms, 200ms, 300ms...
});

​
Stagger with Range

Interpolate delays from 0ms to 1000ms: 
anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger([0, 1000]) // First: 0ms, Last: 1000ms
});

​
Stagger from Center

Start the stagger effect from the center element: 
anime({
  targets: '.box',
  scale: [0, 1],
  delay: anime.stagger(50, { from: 'center' })
});

​
Grid-based Stagger

Create 2D stagger effects for grid layouts: 
anime({
  targets: '.grid-item',
  scale: [0, 1],
  delay: anime.stagger(100, {
    grid: [10, 5], // 10 columns, 5 rows
    from: 'center'
  })
});

​
Grid with Axis Direction

Stagger along a specific axis in a grid: 
anime({
  targets: '.grid-item',
  translateY: -30,
  delay: anime.stagger(50, {
    grid: [8, 8],
    axis: 'y' // Stagger vertically
  })
});

​
Stagger with Easing

Apply easing to the stagger distribution: 
anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger(100, {
    ease: 'easeOutQuad',
    from: 'center'
  })
});

​
Random Stagger Order

Randomize the stagger sequence: 
anime({
  targets: '.box',
  rotate: 360,
  delay: anime.stagger(80, { from: 'random' })
});

​
Reversed Stagger

Reverse the stagger direction: 
anime({
  targets: '.box',
  translateY: -50,
  delay: anime.stagger(100, {
    from: 'last',
    reversed: true
  })
});

​
Use Cases

List Animations

Animate menu items or list entries with cascading effects

Grid Layouts

Create wave patterns across image galleries or product grids

Text Effects

Animate letters or words with sequential timing

Loading States

Build skeleton loaders with staggered placeholder animations

​
Notes

The stagger function is calculated once and cached for performance. The calculation considers the total number of targets and their positions.
Combine grid and from: 'center' to create ripple effects that emanate from the center of a 2D layout.
When using grid, ensure your targets are arranged in the same grid structure (row-by-row) for the stagger to work correctly.

Build docs developers (and LLMs) love

Get started for freeTalk to us