Claude Code can scaffold, debug, and iterate on [Framer Motion](https://motion.dev/) animations directly in your terminal. Give it a clear prompt describing the animation, your target component, and any timing constraints, and it will generate production-ready motion code without leaving your editor. The main risk is burning through your Claude usage window mid-session on a complex animation iteration loop, so monitor your limits. Best suited for React developers who want AI-assisted animation without copy-pasting from a browser tab.

- Framer Motion is a React animation library with a declarative API (`motion.*` components, `useAnimation`, `AnimatePresence`)
- Claude Code works best on animations when you provide component context, not just "add animation"
- Complex animation sessions (staggered lists, scroll-linked effects) can consume a significant chunk of your [Claude Code usage limits](/content/blog/how-do-i-check-my-claude-code-usage-limits/index.html)

## What is Framer Motion and why use Claude Code for it?

[Framer Motion](https://motion.dev/) (now rebranded as Motion) is the de-facto animation library for React. It abstracts away the complexity of CSS keyframes and the Web Animations API behind a component-driven model: wrap a JSX element with `motion.div`, pass `initial`, `animate`, and `exit` props, and you have a transition.

The API surface is wide, though. Variants, layout animations, `useScroll`, `useSpring`, `AnimatePresence`, drag constraints, shared layout keys — it is easy to lose 30 minutes hunting the right incantation in the docs. Claude Code collapses that lookup time. You describe the behavior you want in plain language; it writes the Framer Motion code that produces it.

## How to set up Framer Motion before prompting Claude Code

Claude Code operates on your actual codebase, so install the library first:

```bash
npm install motion
# or
yarn add motion
```

As of Motion v11+, the package name changed from `framer-motion` to `motion`. If you are on an older project, you may still be using the legacy package. Either way, tell Claude Code which package you have installed so it uses the correct import paths.

Also make sure your project compiles JSX (Next.js, Vite, Create React App all do out of the box). Claude Code will read your `tsconfig.json` or `vite.config.ts` automatically when you run it from the project root.

## How to prompt Claude Code for Framer Motion animations

Vague prompts produce vague animations. The more context you give, the more precise the output. A good prompt structure for animation work:

### 1\. Reference the specific component

Open Claude Code in your project directory, then give it a scoped instruction:

```
In src/components/Card.tsx, wrap the card with motion.div. On mount,
animate from opacity 0 and y: 20 to opacity 1 and y: 0 with a 0.4s
ease-out transition.
```

By naming the file, Claude Code reads it first and generates code that matches your existing props, className structure, and TypeScript types rather than a generic stub.

### 2\. Describe the trigger, not just the visual

Framer Motion has multiple trigger mechanisms (mount, hover, scroll, gesture, programmatic). State the trigger explicitly:

- **On mount**: "Animate in when the component renders"
- **On hover**: "Scale to 1.05 on hover, return on mouse-leave"
- **On scroll**: "Fade in when 20% of the element is in the viewport using useInView"
- **Programmatic**: "Trigger the animation from a button click using useAnimation"

### 3\. Request staggered children as a variant pattern

If you have a list of items, Framer Motion's `variants` API with `staggerChildren` is cleaner than individual delays. Ask for it explicitly:

```
In src/components/FeatureList.tsx, animate the list items using Framer
Motion variants with staggerChildren: 0.1. Each item should slide in
from x: -20 to x: 0.
```

### 4\. Use `/clear` between separate animation tasks

Claude Code's context window retains your conversation. When switching from one component's animation to another, run `/clear` to reset the context. This keeps Claude Code focused and reduces token overhead from carrying irrelevant previous discussion, which helps preserve your usage window. According to the [Claude Code token usage guide](/content/blog/how-to-reduce-claude-code-token-usage/index.html), clearing context between distinct tasks is one of the most effective ways to reduce consumption.

## Common Framer Motion animation patterns and how to request them in Claude Code

| Animation Goal          | Framer Motion API               | Sample Claude Code Prompt Phrase                                |
|-------------------------|----------------------------------|----------------------------------------------------------------|
| Fade in on mount        | `motion.div` \+ `initial/animate` | "Fade in from opacity 0 on render"                            |
| Exit animation          | `AnimatePresence` \+ `exit`     | "Fade out when the component unmounts, use AnimatePresence"   |
| Staggered list         | `variants` \+ `staggerChildren`  | "Stagger each list item by 0.08s using variants"             |
| Scroll-linked fade     | `useInView` or `useScroll`     | "Animate in when 30% visible using useInView"                |
| Hover scale            | `whileHover`                     | "Scale to 1.04 on hover with a spring transition"            |
| Drag constraint         | `drag` \+ `dragConstraints`     | "Make the card draggable with a ref-based constraint to its parent" |
| Shared layout           | `layoutId`                       | "Animate the selected indicator between tabs using layoutId"  |

## How to iterate on animations without burning your usage window

Animation work is inherently iterative. You ship a fade, feel it's too slow, ask for a spring instead, tweak the stiffness, and repeat. Each exchange consumes tokens. A complex multi-component animation session can eat a meaningful portion of your hourly Claude Code usage before you realize it.

A few practices that help:

- **Batch your changes**: Instead of "make it faster" followed by "now add a bounce", write one prompt with all the constraints: "Use a spring with stiffness 300 and damping 20, overshoot is fine."
- **Use `/clear` liberally**: Once an animation is done and committed, clear context before the next task.
- **Check your usage before long sessions**: The [`/usage` command in Claude Code](/content/blog/claude-code-usage-statistics-command/index.html) shows your current consumption. Run it before starting a big animation sprint.
- **Know your reset window**: Claude Code usage resets on a rolling 5-hour window ( [when Claude Code usage resets](/content/blog/when-does-claude-code-usage-reset/index.html)). If you are close to the limit, finishing a small animation task and then pausing is better than getting cut off mid-refactor.

## Debugging Framer Motion issues with Claude Code

When an animation is not rendering correctly, paste the relevant component directly into the Claude Code session with a description of what you see versus what you expect:

```
The AnimatePresence exit animation is not triggering. Here is the component:
[paste component]
The modal dismisses instantly instead of fading out. What is wrong?
```

Common issues Claude Code is good at catching:

- Missing `AnimatePresence` wrapper when using `exit` props
- Conditional rendering with `&&` instead of a state-driven boolean (breaks exit animations)
- Forgetting to add a unique `key` prop to elements inside `AnimatePresence`
- Mixing `framer-motion` and `motion` imports after a package migration
- Using `layout` prop without a stable `key` on the parent

## Working with Claude Code on React components and animations

Framer Motion animations rarely live in isolation. They connect to your component state, your routing library, and sometimes your design tokens. Claude Code can handle multi-file refactors, so you can ask it to:

- Wrap an entire page-level component in a layout transition that coordinates with Next.js route changes
- Extract animation variants into a shared `animations.ts` constants file
- Convert a CSS transition you already have into an equivalent Framer Motion implementation
- Add reduced-motion support using Framer Motion's `useReducedMotion` hook across multiple components in one pass

## Key takeaways

1. Install `motion` (or `framer-motion` for legacy projects) before starting a Claude Code session
2. Reference the specific component file in your prompt so Claude Code reads existing code rather than generating a generic snippet
3. State the trigger explicitly (mount, hover, scroll, programmatic)
4. Request variants with `staggerChildren` for list animations rather than manual delays
5. Use `/clear` between animation tasks to reduce context and token spend
6. Check `/usage` before long iteration loops to avoid a mid-session lockout
7. Use [Usagebar](/content/site-root.html) for real-time menu bar usage visibility with threshold alerts at 50%, 75%, and 90%