Framer Motion
Declarative animation for React — layout transitions, gestures and exit animations.
What it is
Framer Motion is a production-ready motion library for React that allows developers to create animations and interactive UI transitions easily, using a declarative API.
Framer Motion uses components like `<motion.div>` and hooks such as `useAnimation` to animate React elements. It supports animations for position, scale, rotation, opacity, and more, along with gestures, layout transitions, keyframes, and variants for complex animation sequences.
- Licence
- MIT
- Watch for
- Respect `prefers-reduced-motion` — the library supports it
When to use it
The question documentation cannot answer for you — because it cannot recommend something else.
Reach for it when
- React interfaces where animation should be expressed as component state, not imperative code
- You need layout animations or animated route transitions
Look elsewhere when
- A CSS transition would do — it costs nothing and ships no JavaScript
- Complex timeline sequencing outside React, where GSAP is stronger
Installation
npm install framer-motionGetting started
The smallest useful thing you can do with it, and what each part means.
import { motion } from 'framer-motion';
function App() {
return (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
Hello, Framer Motion!
</motion.div>
);
}<motion.button whileHover={{ scale: 1.2 }}>
Hover me!
</motion.button>Advanced usage
Where the library earns its place over a simpler alternative.
const boxVariants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0 }
};
<motion.div initial='hidden' animate='visible' variants={boxVariants} transition={{ duration: 1 }} /><motion.div drag dragConstraints={{ left: 0, right: 100, top: 0, bottom: 100 }}>
Drag me!
</motion.div><motion.div layout>
{items.map(item => (
<motion.div key={item.id} layout>{item.name}</motion.div>
))}
</motion.div><motion.div animate={{ x: [0, 100, 50, 100, 0] }} transition={{ duration: 2 }} />Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- Animations not triggering
- Ensure that you are using `<motion.div>` (or other motion elements) and that `initial` and `animate` props are correctly set.
- Unexpected jump on layout animation
- Use the `layout` prop consistently and avoid conflicting CSS transforms.
- Performance issues with many elements
- Consider using `AnimatePresence` for conditional components and limit simultaneous animations.
Best practices
- Use variants to manage multiple animation states efficiently.
- Prefer `layout` prop for automatic layout animations on reordering components.
- Use `transition` properties to control timing and easing for smoother animations.
- Leverage gesture props like `whileHover`, `whileTap`, and `drag` for interactive UIs.
- Keep performance in mind: avoid animating large numbers of elements unnecessarily.
Alternatives
Comparable options, and the reason you would pick one over the other.
GSAP
Framework-agnostic, unmatched timeline control, better for scroll-driven sequences
CSS transitions
Free, hardware-accelerated, and enough for most hover and fade effects
Background
Why it exists, and what it was reacting to.
Framer Motion was created by the team behind Framer to provide a simple, yet powerful, way to animate React components. It leverages the power of the Framer library while being optimized for performance and accessibility, making complex animations achievable with minimal code.