# Motion (Framer Motion) — Modern Animation Library for React & JS

> Motion (formerly Framer Motion) is a modern animation library for React and JavaScript with a simple declarative API. Hardware-accelerated transforms, gestures, layout animations, and SVG morphing — all in a tiny package.

## Install

Save in your project root:

## Quick Use

```bash
npm i motion
```

```tsx
import { motion } from "motion/react";

function Card() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: "easeOut" }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
    >
      Hello
    </motion.div>
  );
}
```

## Intro

Motion (formerly Framer Motion) is the most popular React animation library. Originally built at Framer for the Framer design tool, now an independent project led by Matt Perry. Production-grade with hardware-accelerated transforms and gesture handling.

- **Repo**: https://github.com/motiondivision/motion
- **Stars**: 31K+
- **Language**: TypeScript
- **License**: MIT

## What Motion Does

- **Declarative animations** — `initial`, `animate`, `exit` props
- **Layout animations** — auto-animate when DOM layout changes
- **Gestures** — `whileHover`, `whileTap`, `whileDrag`, `whileInView`
- **Variants** — orchestrate animations across components
- **Spring physics** — natural-feeling motion
- **SVG morphing** — animate path data
- **Scroll triggers** — scroll-linked animations
- **Vanilla JS** — `motion/react` and `motion` (vanilla)

## Architecture

Wraps DOM elements with `motion.div`, `motion.svg`, etc. Uses Web Animations API where possible (hardware accelerated), falls back to RAF for unsupported properties. Layout animations use FLIP technique.

## Self-Hosting

Client library only.

## Key Features

- Hardware-accelerated transforms
- Spring & inertia physics
- Layout animations (FLIP)
- Gesture handling (drag, hover, tap, focus)
- AnimatePresence for exit animations
- Variants for orchestration
- Scroll-linked animations
- Server-side rendering
- Now also supports vanilla JS

## Comparison

| Library | API | Layout | Gestures | Bundle |
|---|---|---|---|---|
| Motion | Declarative | Yes | Built-in | ~30KB |
| React Spring | Imperative hooks | Limited | Manual | ~15KB |
| GSAP | Imperative | No | Plugin | ~30KB |
| Auto-Animate | Drop-in | Yes | No | ~3KB |

## 常见问题 FAQ

**Q: 改名后包名是？**
A: 从 `framer-motion` 改成 `motion`。React API 是 `motion/react`，vanilla 是 `motion`。

**Q: layout 动画原理？**
A: FLIP（First, Last, Invert, Play）：测量前后位置 → 反向 transform → 动画归零。零重排开销。

**Q: bundle 太大？**
A: 用 `LazyMotion` + 按需 features 可减到 ~5KB。

## 来源与致谢 Sources

- Docs: https://motion.dev
- GitHub: https://github.com/motiondivision/motion
- License: MIT

---
Source: https://tokrepo.com/en/workflows/89ca3afc-356f-11f1-9bc6-00163e2b0d79
Author: AI Open Source