stagger

When animating elements with the animate function, it's possible to stagger animations across them using stagger().

#Usage

Import from "framer-motion".

// React
import { useAnimate, stagger } from "framer-motion"

// Universal
import { animate, stagger } from "framer-motion/dom"

When animating more than one element, pass stagger to the delay option.

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

By passing a duration, in seconds, to stagger, the delay of each element will be increased by that amount for each.

#Options

stagger can accept options as the second argument.

stagger(0.1, { from: "center" })

#from: "first" | "last" | "center" | number

The element to stagger out from. This can either be the "first", "last" or "center" element. Or, by passing a number, animations can stagger out from a custom index.

// Stagger out from the third element (index: 2)
stagger(0.1, { from: 2 })

#ease: Easing

By passing an easing function, staggers can be redistributed through the total stagger time.

Any valid Framer Motion easing is accepted, like a cubic bezier defintion:

stagger(0.1, { ease: [.32, .23, .4, .9] })

Name of an easing function:

stagger(0.1, { ease: "easeOut" })

Or an easing function:

stagger(0.1, { ease: p => Math.sin(p) })

#startDelay: number

A delay, in seconds, from which to start the stagger from.

stagger(0.5, { startDelay: 1 }) // 1, 1.5, 2...