# @fluentui/react-motion

> A package with utilities & motion definitions using Web Animations API

Latest version **9.16.4** (published 2026-09-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @fluentui/react-motion
pnpm add @fluentui/react-motion
yarn add @fluentui/react-motion
bun add @fluentui/react-motion
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.16.4 |
| Published | 2026-09-21 |
| First published | 2024-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 331.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20293 |
| Maintainers | uifabricteam, uifrnbot, microsoft1es, microsoft-oss-releases |

## Links

- npm: https://www.npmjs.com/package/@fluentui/react-motion
- Repository: https://github.com/microsoft/fluentui
- Homepage: https://github.com/microsoft/fluentui#readme
- Issues: https://github.com/microsoft/fluentui/issues
- npm.io page: https://npm.io/package/@fluentui/react-motion

## Dependencies (3)

- [@swc/helpers](https://npm.io/package/@swc/helpers.md) ^0.5.1
- [@fluentui/react-utilities](https://npm.io/package/@fluentui/react-utilities.md) ^9.26.7
- [@fluentui/react-shared-contexts](https://npm.io/package/@fluentui/react-shared-contexts.md) ^9.26.4

## Recent versions

- 9.16.4 (latest) — 2026-09-21
- 0.0.0-nightly-20261002-0407.1 (nightly) — 2026-10-02
- 9.74.5-experimental.tabster-v9.20260804-bb909442fe.0 (experimental) — 2026-08-04
- 0.0.0-nightly-20260929-0404.1 — 2026-09-29
- 0.0.0-nightly-20260928-0404.1 — 2026-09-28
- 0.0.0-nightly-20260925-0403.1 — 2026-09-25
- 0.0.0-nightly-20260924-0403.1 — 2026-09-24
- 0.0.0-nightly-20260923-0404.1 — 2026-09-23
- 0.0.0-nightly-20260922-0403.1 — 2026-09-22
- 0.0.0-nightly-20260917-0408.1 — 2026-09-17
- 0.0.0-nightly-20260916-0409.1 — 2026-09-16
- 0.0.0-nightly-20260915-0407.1 — 2026-09-15
- 0.0.0-nightly-20260914-0407.1 — 2026-09-14
- 0.0.0-nightly-20260910-0408.1 — 2026-09-10
- 0.0.0-nightly-20260909-0407.1 — 2026-09-09
- … 609 more at https://npm.io/package/@fluentui/react-motion/versions

## README

# @fluentui/react-motion

**React Motion components for [Fluent UI React](https://react.fluentui.dev/)**

A lightweight, performant animation library for React that brings Fluent UI experiences to life using the Web Animations API (WAAPI).

## Features

- ⚡ **Performance** — Animations run on the compositor thread for smooth 60fps motion
- 📦 **Lightweight** — ~3KB gzipped, leverages native browser capabilities
- 🎯 **Simple by default** — Common UI animations with minimal code
- 🔧 **Powerful on demand** — Full customization with keyframes, timing, and callbacks

## Installation

```bash
npm install @fluentui/react-motion
# or
yarn add @fluentui/react-motion
```

## Quick Start

```tsx
import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';

// Create a custom fade presence component
const Fade = createPresenceComponent({
  enter: {
    keyframes: [{ opacity: 0 }, { opacity: 1 }],
    duration: motionTokens.durationNormal,
  },
  exit: {
    keyframes: [{ opacity: 1 }, { opacity: 0 }],
    duration: motionTokens.durationFast,
  },
});

// Use it in your app
function App() {
  const [visible, setVisible] = useState(true);

  return (
    <Fade visible={visible}>
      <div>Animated content</div>
    </Fade>
  );
}
```

## Documentation

📚 **[Full documentation](https://react.fluentui.dev/?path=/docs/motion-introduction--docs)**

- [Introduction](https://react.fluentui.dev/?path=/docs/motion-introduction--docs) — Overview and key concepts
- [createPresenceComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs) — Two-way enter/exit animations
- [createMotionComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createmotioncomponent--docs) — One-way animations
- [Motion Tokens](https://react.fluentui.dev/?path=/docs/motion-tokens--docs) — Duration and easing values
- [Migration Guide](https://react.fluentui.dev/?path=/docs/motion-migration--docs) — Coming from Framer Motion, GSAP, etc.

## Pre-built Components

For ready-to-use motion components (Fade, Scale, Slide, Collapse, etc.), see **[@fluentui/react-motion-components-preview](https://www.npmjs.com/package/@fluentui/react-motion-components-preview)**.

---
_Source: https://npm.io/package/@fluentui/react-motion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._