1. Options

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

stagger(duration, options)

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

import { animate, stagger } from "motion"

animate("li", { x: 100 }, { delay: stagger(0.1) })



Default: 0

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


Default: "first"

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

  [a, b, c],
  { x: 100 },
  { delay: stagger(0.1, { from: "last" }) } // 0.2, 0.1, 0


Default: "linear"

Applies easing to the duration so the interval between delays becomes longer or shorter over each animation.

Can be set in the same way as animate easing option, or as an easing function.

  { opacity: 1 }, 
  { delay: stagger(0.2, { easing: "ease-out" }) }

Have you seen Motion DevTools?

It's an incredible new developer tool for Chrome that let you inspect, edit and export Motion One and CSS animations. Animate like the good-ol' days of Flash!