Motion
Back to framer.com
DocumentationUniversal
stagger
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Hooks
  • useAnimate
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
Universal
  • animate
  • scroll
  • inView
  • transform
  • stagger
  • frame
  • Easing functions
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

stagger

A function for staggering animations across elements.

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...
PrevioustransformNextframe
On this page
  • Usage
  • Options

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement