MotionStyles

MotionStyles is part of the Motion set, imported from @jcsoftdev/ui/motion.

Import

import { MotionStyles } 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

This component declares no props of its own.

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/motion-styles.tsx