motion-stagger

Animates slotted children in sequence with a configurable stagger interval. Each child enters with a spring-based fade and lift. Control the stagger origin with from.

Preview

Item one

Item two

Item three

Item four

Import

import 'motion-components/motion-stagger'   // just this one
import 'motion-components'               // or the whole library

Usage

<motion-stagger interval="0.06">
  <div>Item one</div>
  <div>Item two</div>
  <div>Item three</div>
</motion-stagger>

from="center"

Stagger radiates outward from the center item, ideal for symmetric lists and icon grids.

🌊

⚡

🎨

⚙️

✨

<motion-stagger from="center" interval="0.08">
  <div>🌊</div>
  <div>⚡</div>
  <div>🎨</div>
  <div>⚙️</div>
  <div>✨</div>
</motion-stagger>

from="last"

Stagger runs from the last item backward, useful for exit animations or right-to-left contexts.

Item one

Item two

Item three

<motion-stagger from="last" interval="0.07">
  <div>Item one</div>
  <div>Item two</div>
  <div>Item three</div>
</motion-stagger>

Properties

Attribute	Property	Type	Default	Description
interval	interval	number	0.06	Delay between each child animation in seconds
duration	duration	number	0.5	Spring duration hint in seconds
y	y	number	16	Initial vertical offset per child in px
from	from	string	'first'	'first', 'last', or 'center': where the stagger originates
once	once	boolean	true	Animate only on first intersection. Set it to "false" to replay on every entry

JavaScript API

Trigger the stagger entrance programmatically with play() and cancel().

JSAPI

–

Accessibility

Respects prefers-reduced-motion: when enabled, the stagger reveal is skipped and all children appear at their final state immediately.