Skip to main content
Creates a function that returns staggered values for distributing animation timing across multiple targets. Supports grid-based positioning, custom start points, easing functions, and various distribution patterns.

​
Syntax

stagger(value, params)

​
Parameters

​
value
Number | String | [Number, Number] | [String, String]
required
The staggered value or range to distribute across targets.
  • Single value: All targets receive the same stagger increment
  • Range [start, end]: Values interpolate from start to end across targets
  • Supports units (e.g., '100px', ['0deg', '360deg'])
​
params
Object
Configuration options for the stagger behavior.
​
from
Number | 'first' | 'center' | 'last' | 'random'
Starting point for stagger distribution. Default: 'first'
  • Number: Index of the target to start from
  • 'first': Start from the first target (index 0)
  • 'center': Start from the middle target
  • 'last': Start from the last target
  • 'random': Randomize stagger order
​
grid
[Number, Number]
Grid dimensions [columns, rows] for 2D stagger distribution.
​
axis
'x' | 'y'
Axis to use for grid-based stagger calculation.
​
ease
String | Function
Easing function to apply to stagger distribution.
​
reversed
Boolean
Reverses the stagger order. Default: false
​
start
Number | String
Starting offset value. Default: 0
​
total
Number
Override the total number of targets.
​
use
String | Function
Property name or function to determine custom stagger index.
​
modifier
Function
Function to modify the final stagger value.

​
Returns

A stagger function that generates values for each target:
(target, index, total, timeline) => Number | String

​
Examples

​
Basic Stagger

import anime from 'animejs';

anime({
  targets: '.box',
  translateX: 250,
  delay: anime.stagger(100) // Delay increases by 100ms for each target
});

​
Stagger with Range

anime({
  targets: '.box',
  rotate: anime.stagger([0, 360]), // First box 0deg, last box 360deg
  delay: anime.stagger(100)
});

​
Grid-Based Stagger

anime({
  targets: '.grid-item',
  scale: anime.stagger(1.2, {
    grid: [4, 5], // 4 columns, 5 rows
    from: 'center',
    axis: 'x'
  })
});

​
Stagger with Easing

anime({
  targets: '.box',
  translateY: anime.stagger(100, {
    ease: 'easeOutQuad',
    from: 'last'
  })
});

​
Random Stagger Order

anime({
  targets: '.box',
  opacity: [0, 1],
  delay: anime.stagger(50, { from: 'random' })
});

​
Custom Index with Property

anime({
  targets: '.box',
  translateX: anime.stagger(20, {
    use: 'data-index' // Use data-index attribute for stagger order
  })
});

​
Source

Defined in: /home/daytona/workspace/source/src/utils/stagger.js:82

Build docs developers (and LLMs) love

Get started for freeTalk to us