Animations with Framer Motion
In this page:
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
Content
</motion.div>
<AnimatePresence>{show && <motion.div exit={{ opacity: 0 }} />}</AnimatePresence>Animating with motion Components
Framer Motion provides a motion.* version of every HTML tag (motion.div, motion.button, etc.) that accepts special animation props. Setting animate to a target style object smoothly transitions the element there from its current state.
Example: Animating with motion Components
// Run in your local React project (npm install required)
import { motion } from 'framer-motion';
function App() {
return (
<motion.div animate={{ x: 100 }} transition={{ duration: 1 }}>
I slide to the right
</motion.div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Defining Initial and Animate States
The initial prop describes an element's starting appearance (like invisible and shifted up), and animate describes where it should end up. Framer Motion automatically interpolates smoothly between the two whenever the component mounts.
Example: Defining Initial and Animate States
// Run in your local React project (npm install required)
import { motion } from 'framer-motion';
function FadeInBox() {
return (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
I fade in on mount
</motion.div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Animating Removal with AnimatePresence
Normally, when a component is removed from the React tree, it disappears instantly with no chance to animate out. Wrapping conditionally-rendered motion components in <AnimatePresence> lets you define an exit animation that plays before the element is actually removed from the DOM.
Example: Animating Removal with AnimatePresence
// Run in your local React project (npm install required)
import { motion, AnimatePresence } from 'framer-motion';
function App() {
const [show, setShow] = React.useState(true);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle</button>
<AnimatePresence>
{show && <motion.div key="box" exit={{ opacity: 0 }}>Fades out on remove</motion.div>}
</AnimatePresence>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Using plain <div> instead of <motion.div> and expecting animation props like animate to work.
- Not providing an initial state, causing the first render to skip its entrance animation.
- Forgetting AnimatePresence is needed specifically for animating elements as they're REMOVED from the DOM, not just added.
- Framer Motion is a popular animation library providing motion.* versions of every HTML element.
- The initial, animate, and exit props describe an element's starting, target, and exit states.
- AnimatePresence enables exit animations for elements being removed from the React tree.
- Animations are declarative — you describe the states, not the frame-by-frame motion.
Requires npm install framer-motion — not available via CDN in this sandbox; works with React 16.8+.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: