Framer Motion Motion Animation Library
Last updated: 2026-11-02
Framer Motion Motion Animation Library
Framer Motion (published today as the motion package) is the most popular animation library for React: declare the initial state, the target state and the transition on a motion.div and it tweens between them for you. AnimatePresence handles exit animations, and gestures plus layout animations are supported out of the box, which makes the library a natural fit for state-driven interfaces.
| Group | Ecosystem |
|---|---|
| Kind | Library |
| Since | v11 (official package name motion, imported from motion/react) |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
npm install motion
import { motion, AnimatePresence } from 'motion/react'
<motion.div
initial={{ opacity: 0, y: -20 }} // initial state
animate={{ opacity: 1, y: 0 }} // target state
exit={{ opacity: 0 }} // exit state (needs AnimatePresence)
transition={{ duration: 0.3, ease: 'easeOut' }} // transition config
>
Content
</motion.div>
// Spring physics: <motion.button whileTap={{ scale: 0.9 }} />⚙️ Parameters
| initial / animate | The starting and target style objects; the library tweens between them whenever a value changes. |
|---|---|
| transition | Transition configuration: duration, easing curve, or spring physics parameters (type: 'spring', stiffness, damping). |
| AnimatePresence | Wraps conditionally rendered elements so the exit animation plays before the component is removed from the DOM. |
Returns：No return value — see the example for third-party library usage.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Simulation: after clicking Open modal the mask fades in over 0.3s and the panel springs from a shrunken state above into the center of the screen (spring-like easing); clicking the mask or the Close button fades it out again. This demonstrates the declarative state-driven plus CSS transition approach that real Framer Motion implements with motion.div and AnimatePresence.💡 Key Points
💡 Tip The exit prop plus AnimatePresence is the standard combination for modal and list-item exits; plain CSS cannot animate an element that is being unmounted.
ℹ️ Info Since v11 the official package is motion with an almost identical API and the import path motion/react; the old framer-motion package keeps working.
⚠️ Warning With several hundred animated elements on screen, watch the performance: prefer transform and opacity, or limit the scope of CSS transitions and layout animations.
🏷️ More Ecosystem
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How do I choose between Framer Motion and CSS animation?
A Plain CSS is enough for simple hover and fade-in effects; use Framer Motion when you need state-driven choreography, exit animations, gesture interaction, spring physics or layout animations — it reads React state directly.
Q What does AnimatePresence do?
A When React unmounts an element it removes the DOM node immediately, so CSS never gets the chance to play an exit animation. AnimatePresence delays the unmount so the exit animation finishes before the node is really removed.
Q What is the relation between the new motion package and framer-motion?
A After Framer Motion v11 the team ships a standalone motion package with a compatible API: the import becomes motion/react and it also works with plain JavaScript. The old package is still maintained, and new projects should start with motion.
