Stagger

Its children enter one after another, like Reveal, with the whole sequence capped by maxStagger. Each child element receives data-motion and a style variable, so it must pass style and data-* props to its DOM element (every element and most components do).

Import

import { Stagger } from "@jcsoftdev/ui/motion";

Usage

export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
delay	number		Extra wait before the first child enters, in ms.
inView	boolean	false	Start when the group first scrolls into view instead of on mount.
maxStagger	number		Longest gap between the first and the last child’s start, in ms. Each step is a quarter of --motion-duration, shortened so long lists still fit in this span (default 1.5 durations).
as	"div" | "ol" | "section" | "ul"	"div"	Element that wraps the children, e.g. ul for a list of li.
ref	Ref<HTMLElement>
children	ReactNode

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Reveal On Mount
• Staggered Cards
• Cross Fade List Detail
• Count Up In AK Pi
• Highlight Rows
• Cross Fade Swaps Keyed Content
• Cross Fade Reduced Motion Swaps At Once
• Count Up Lands On The Formatted Value
• Count Up Reduced Motion Shows The Final Value
• Reveal And Stagger Reduced Motion Are Static
• Stagger Keeps Children In The Accessibility Tree
• Highlight Row Pulses Only New Rows

Source

packages/ui/src/motion/reveal.tsx