CrossFade

Swaps keyed content (a list-detail pane, a tab panel) with a cross-fade and a 4px rise. The old content stays mounted on top of the new one until it has faded, out of the layout (so nothing jumps), hidden from assistive tech and inert. If focus was inside the old content it moves to the new content. The first render (also server HTML) never animates; reduced motion swaps without any fade.

Import

import { CrossFade } 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
contentKey *	Key		Identity of the content. A new key fades the old content out and the new one in.
children	ReactNode
ref	Ref<HTMLDivElement>

* 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/cross-fade.tsx