Stagger

Stagger is used to sequence animations across multiple elements.
You can control delay, layout, direction, and repetition for fine-tuned effects.

You can use stagger inside tweens and timelines.

Basic stagger

This example offsets each animation by 0.25s to create a ripple effect.

animatry.to('.box', {
  x: maxWidth,
  scale: 0.5,
  rotate: 45,
  stagger: 0.25, // delay between each element
  repeat: -1,
  alternate: true,
})

Layout-based stagger

With layout-aware staggering, you can animate from the center or other spatial positions.
This layout uses layout: 'distance' to calculate delays based on element position.

animatry.to('.box', {
  scale: 0.5,
  rotate: 135,
  borderColor: 'cyan',
  stagger: {
    layout: 'distance',
    from: 'center',
    duration: 1,

    repeat: 1,
    iterationDelay: 0.5,
    alternate: true,
  },
  repeat: 1,
  alternate: true,
})

Stagger Options

When using an object as the stagger value, you can control how timing is distributed.