framer-motion.txtā¢4.08 kB
# Framer Motion - Animation Library for React
## Overview
Framer Motion is a production-ready motion library for React that makes creating animations simple and intuitive.
## Installation
```bash
npm install framer-motion
# or
npm install motion # Latest v11+ uses 'motion' package
```
## Basic Concepts
### Motion Components
Transform any HTML/SVG element into an animated component:
```tsx
import { motion } from 'framer-motion'
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
Content
</motion.div>
```
### Common Animations
**Fade In:**
```tsx
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
/>
```
**Slide In:**
```tsx
<motion.div
initial={{ x: -100 }}
animate={{ x: 0 }}
/>
```
**Scale:**
```tsx
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Click me
</motion.button>
```
### Variants Pattern
```tsx
const variants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.6,
ease: 'easeOut'
}
}
}
<motion.div
initial="hidden"
animate="visible"
variants={variants}
>
Content
</motion.div>
```
### Staggered Animations
```tsx
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: {
staggerChildren: 0.1
}
}
}
const item = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0 }
}
<motion.ul variants={container} initial="hidden" animate="show">
<motion.li variants={item}>Item 1</motion.li>
<motion.li variants={item}>Item 2</motion.li>
<motion.li variants={item}>Item 3</motion.li>
</motion.ul>
```
### Scroll-based Animations
```tsx
import { useScroll, useTransform } from 'framer-motion'
function Component() {
const { scrollY } = useScroll()
const opacity = useTransform(scrollY, [0, 300], [1, 0])
return (
<motion.div style={{ opacity }}>
Fades out on scroll
</motion.div>
)
}
```
### Layout Animations
```tsx
<motion.div layout>
Content that animates when layout changes
</motion.div>
```
### Exit Animations
```tsx
import { AnimatePresence } from 'framer-motion'
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
Content
</motion.div>
)}
</AnimatePresence>
```
### Gesture Animations
```tsx
<motion.div
drag
dragConstraints={{ left: 0, right: 300 }}
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
whileDrag={{ scale: 1.2 }}
>
Draggable
</motion.div>
```
## Common Patterns in Templates
### Page Transitions
```tsx
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
>
{children}
</motion.div>
```
### Hero Section Animation
```tsx
<motion.section
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, ease: 'easeOut' }}
>
<motion.h1
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.2, duration: 0.6 }}
>
Title
</motion.h1>
<motion.p
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ delay: 0.4, duration: 0.6 }}
>
Description
</motion.p>
</motion.section>
```
### Card Hover Effects
```tsx
<motion.div
whileHover={{ y: -5 }}
transition={{ type: 'spring', stiffness: 300 }}
className="card"
>
Card content
</motion.div>
```
## Performance Tips
1. Use `transform` and `opacity` for best performance
2. Avoid animating `width`, `height`, `top`, `left`
3. Use `layout` prop instead of manual position animation
4. Use `willChange` CSS property sparingly
5. Reduce motion for users with accessibility preferences
## With Next.js
Framer Motion works seamlessly with Next.js. For SSR compatibility:
```tsx
'use client' // Required in Next.js 13+ App Router
import { motion } from 'framer-motion'
```
## Resources
- Docs: https://www.framer.com/motion/
- Examples: https://www.framer.com/motion/examples/