npm.io
0.15.8 • Published 1 week ago

@fluentui/react-motion-components-preview

Licence
MIT
Version
0.15.8
Deps
3
Size
380 kB
Vulns
0
Weekly
0
Stars
20.2K
SummaryDependencyVersions

@fluentui/react-motion-components-preview

Pre-built Motion Components for Fluent UI React

Preview Package: These components are in beta and APIs may change before stable release.

Ready-to-use presence components for common UI animation patterns, built on top of @fluentui/react-motion.

Components

Component Description
Fade Opacity transitions for tooltips, notifications, overlays
Scale Size animations for popovers, menus, emphasis
Collapse Height/width expansion for accordions, expandable sections
Slide Directional movement for drawers, panels, carousels
Blur Focus/defocus effects for backgrounds, depth
Rotate 3D rotation for card flips, reveals
Stagger Choreography for sequential list animations

Each component (except Blur and Rotate) comes with Snappy (150ms) and Relaxed (250ms) timing variants.

Installation

npm install @fluentui/react-motion-components-preview
# or
yarn add @fluentui/react-motion-components-preview

Quick Start

import { Fade, Scale, Slide, Collapse } from '@fluentui/react-motion-components-preview';

// Simple fade
function Tooltip({ visible, children }) {
  return (
    <Fade visible={visible}>
      {children}
    </Fade>
  );
}

// Slide from the right
function Drawer({ open, children }) {
  return (
    <Slide visible={open} outX="20px">
      {children}
    </Slide>
  );
}

// Use timing variants
import { FadeSnappy, ScaleRelaxed } from '@fluentui/react-motion-components-preview';

<FadeSnappy visible={show}>Quick feedback</FadeSnappy>
<ScaleRelaxed visible={show}>Smooth entrance</ScaleRelaxed>
The .In and .Out Pattern

Every presence component includes one-way sub-components:

// One-way enter animation (plays on mount)
<Fade.In>
  <div>Fades in once</div>
</Fade.In>

// One-way exit animation (plays on mount)
<Fade.Out>
  <div>Fades out once</div>
</Fade.Out>

Documentation

Full documentation

Related