Motion Components & Basic Animations
Replace div with motion.div and use animate, initial, and exit props for simple animations.
What Is Framer Motion?
Framer Motion is a React animation library. Replace HTML elements with their motion.* equivalents to add declarative animations via props instead of CSS keyframes.
Installation
Install Framer Motion and import motion from it.
npm install framer-motion
import { motion } from 'framer-motion';All lessons in this course
- Motion Components & Basic Animations
- Variants for Orchestrated Animations
- Gesture Animations: Hover, Tap & Drag
- Layout Animations & AnimatePresence