How to Do Framer Motion Animations on Claude Code (Step-by-Step)

Claude Code can scaffold, debug, and iterate on Framer Motion 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

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

Framer Motion (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:

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, 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 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). If you are close to the limit, finishing a small animation task and then pausing is better than getting cut off mid-refactor.

The real productivity killer is a surprise lockout when you are three iterations from finishing a polished entrance animation. Usagebar sits in your macOS menu bar and shows your live Claude Code usage, with alerts at 50%, 75%, and 90% so you see the wall coming. Credentials are stored in macOS Keychain. It is free for students and pay-what-you-want otherwise.

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

For tips on building React components more broadly with Claude Code, see how to create React components with Claude Code.

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 for real-time menu bar usage visibility with threshold alerts at 50%, 75%, and 90%

Sources

• https://motion.dev (Framer Motion / Motion official docs)
• https://usagebar.com/blog/how-to-reduce-claude-code-token-usage
• https://usagebar.com/blog/when-does-claude-code-usage-reset
• https://usagebar.com/blog/claude-code-usage-statistics-command
• https://usagebar.com/blog/how-to-create-react-components-claude-code