stagger

stagger is used to offset the start time of each animation.

import { animate, stagger } from "motion"

animate(
  "li",
  { opacity: 1 },
  { delay: stagger(0.1)
})

When defining an animation with one or more elements, delay can be set with the stagger function to delay each element's animation by the specified duration.

Options

stagger accepts options as a second argument.

start

Default: 0

The initial delay from which to calculate subsequent delays.

stagger(0.1, { start: 0.2 }) // 0.2, 0.3, 0.4...

from

Default: "first"

Specifies which element in the array from which to stagger. Can be set as "first", "center", "last", or a number to specify an index.

easing

Default: "linear"

Distributes the calculated easings across the computed total duration according to this easing function so that the interval between delays becomes longer or shorter over each animation.

Example