{images.map((_, index) => (
{
setDirection(index > currentIndex ? 1 : -1)
setCurrentIndex(index)
}}
style={{
width: 10,
height: 10,
borderRadius: '50%',
background: index === currentIndex ? 'white' : 'rgba(255, 255, 255, 0.5)',
cursor: 'pointer'
}}
/>
))}
)
}
```
---
## Navigation Menus
### Animated Dropdown Menu
```jsx
import { motion, AnimatePresence } from 'framer-motion'
import { useState } from 'react'
function DropdownMenu({ trigger, items }) {
const [isOpen, setIsOpen] = useState(false)
return (
setIsOpen(!isOpen)}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
style={{
padding: '12px 24px',
background: '#667eea',
color: 'white',
border: 'none',
borderRadius: 8,
cursor: 'pointer'
}}
>
{trigger}
{isOpen && (
<>
setIsOpen(false)}
style={{
position: 'fixed',
inset: 0,
zIndex: 998
}}
/>
{items.map((item, index) => (
{
item.onClick?.()
setIsOpen(false)
}}
style={{
padding: '12px 20px',
cursor: 'pointer'
}}
>
{item.label}
))}
)}
)
}
```
### Mega Menu
```jsx
import { motion, AnimatePresence } from 'framer-motion'
import { useState } from 'react'
function MegaMenu() {
const [activeMenu, setActiveMenu] = useState(null)
const menus = {
products: {
sections: [
{
title: 'Category 1',
items: ['Product 1', 'Product 2', 'Product 3']
},
{
title: 'Category 2',
items: ['Product 4', 'Product 5', 'Product 6']
}
]
},
solutions: {
sections: [
{
title: 'For Business',
items: ['Enterprise', 'Small Business']
},
{
title: 'For Developers',
items: ['API', 'Documentation']
}
]
}
}
return (
)
}
```
### Mobile Hamburger Menu
```jsx
import { motion, AnimatePresence } from 'framer-motion'
import { useState } from 'react'
function HamburgerMenu() {
const [isOpen, setIsOpen] = useState(false)
const menuItems = [
{ label: 'Home', href: '/' },
{ label: 'About', href: '/about' },
{ label: 'Services', href: '/services' },
{ label: 'Contact', href: '/contact' }
]
return (
<>
{isOpen && (
<>
setIsOpen(false)}
style={{
position: 'fixed',
inset: 0,
background: 'rgba(0, 0, 0, 0.5)',
zIndex: 998
}}
/>
{menuItems.map((item, index) => (
{item.label}
))}
)}
)
}
```
---
## Performance Optimization
### useReducedMotion Hook
```jsx
import { useReducedMotion } from 'framer-motion'
function AccessibleAnimation() {
const shouldReduceMotion = useReducedMotion()
return (
Content that respects user preferences
)
}
```
### Lazy Motion Component
```jsx
import { lazy } from 'react'
import { LazyMotion, domAnimation, m } from 'framer-motion'
// Use 'm' instead of 'motion' with LazyMotion for smaller bundle
function OptimizedComponent() {
return (
)
}
```
### will-change Optimization
```jsx
function OptimizedAnimatedBox() {
return (
)
}
```
### Reuse Variant Objects
```jsx
// ✅ Good - reused variants
const fadeVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1 }
}
function ComponentA() {
return
}
function ComponentB() {
return
}
// ❌ Bad - recreating variants
function ComponentC() {
return (
)
}
```
### Throttle Scroll Events
```jsx
import { motion, useScroll, useTransform } from 'framer-motion'
import { useRef } from 'react'
import { useThrottle } from './useThrottle'
function ThrottledScroll() {
const ref = useRef(null)
const { scrollYProgress } = useScroll({ target: ref })
// Throttle scroll updates to 60fps max
const throttledProgress = useThrottle(scrollYProgress, 16)
const y = useTransform(throttledProgress, [0, 1], [0, -100])
return (
Optimized scroll animation
)
}
```
### Exit Before Enter (Reduce Simultaneous Animations)
```jsx
import { AnimatePresence } from 'framer-motion'
// ✅ Good - "wait" mode reduces simultaneous animations
function OptimizedPageTransition() {
return (
)
}
```
---
## Best Practices Summary
### 1. Use Transform Properties
```jsx
// ✅ Good - hardware accelerated
// ❌ Bad - triggers layout reflow
```
### 2. Respect Accessibility
```jsx
import { useReducedMotion } from 'framer-motion'
function AccessibleComponent() {
const prefersReducedMotion = useReducedMotion()
return (
)
}
```
### 3. Optimize Bundle Size
```jsx
import { LazyMotion, domAnimation, m } from 'framer-motion'
function SmallBundle() {
return (
)
}
```
### 4. Clean Up Animations
```jsx
import { useAnimation } from 'framer-motion'
import { useEffect } from 'react'
function CleanupExample() {
const controls = useAnimation()
useEffect(() => {
controls.start({ opacity: 1 })
// Cleanup on unmount
return () => {
controls.stop()
}
}, [])
return
}
```
### 5. Debounce/Throttle Expensive Operations
```jsx
import { motion, useMotionValue } from 'framer-motion'
import { useDebounce } from './useDebounce'
function DebouncedInput() {
const inputValue = useMotionValue('')
const debouncedValue = useDebounce(inputValue, 300)
return (
inputValue.set(e.target.value)}
/>
)
}
```
---
## Additional Resources
- [Framer Motion Official Docs](https://www.framer.com/motion/)
- [Motion Dev](https://motion.dev/) - New Motion library
- [Motion Examples](https://www.framer.com/motion/examples/)
- [Motion API Reference](https://www.framer.com/motion/component/)
- [Animation Best Practices](https://web.dev/animations/)
---
## License
MIT - Free for personal and commercial use