# 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 the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## 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: What's the package name after the rename?**
A: It changed from `framer-motion` to `motion`. The React API is `motion/react`; vanilla is `motion`.

**Q: How do layout animations work?**
A: FLIP (First, Last, Invert, Play): measure the before/after positions → apply an inverse transform → animate back to zero. Zero reflow overhead.

**Q: Bundle too large?**
A: Use `LazyMotion` with on-demand features to shrink it to ~5KB.

## Sources & Credits

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

---
Source: https://tokrepo.com/en/workflows/motion-framer-motion-modern-animation-library-react-js-89ca3afc
Author: AI Open Source