# Framer Motion Patterns
> Comprehensive Framer Motion patterns — layout animations, gestures, scroll-triggered, stagger, shared layout transitions.
- Skill: `kevinzai/framer-motion-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kevinzai/framer-motion-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kevinzai/framer-motion-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: KevinZai (https://skillmd.com/u/kevinzai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kevinzai/framer-motion-patterns
---
# Framer Motion Patterns
Deep patterns for Framer Motion in React. Goes beyond basics into layout animations, scroll-driven effects, gesture recognition, and orchestrated sequences.
## Core Principles
- Every animation needs a reason (entrance, feedback, spatial continuity, hierarchy)
- Always respect `prefers-reduced-motion` via `useReducedMotion()`
- Prefer `layout` prop over manual position animations
- Use `will-change: transform` sparingly — let Framer handle optimization
- Spring physics over duration-based by default
## Pattern Library
### 1. Staggered List Entrance
```tsx
const container = {
hidden: { opacity: 0 },
show: {
opacity: 1,
transition: { staggerChildren: 0.08, delayChildren: 0.1 }
}
};
const item = {
hidden: { opacity: 0, y: 20 },
show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } }
};
function StaggeredList({ items }: { items: Item[] }) {
return (
{items.map((item) => (
{item.content}
))}
);
}
```
### 2. Shared Layout Transitions
```tsx
function TabPanel({ tabs, activeTab, onTabChange }: TabPanelProps) {
return (
{tabs.map((tab) => (
))}
);
}
```
### 3. AnimatePresence for Enter/Exit
```tsx
function Notification({ message, isVisible, onDismiss }: NotificationProps) {
return (
{isVisible && (
{message}
)}
);
}
```
### 4. Scroll-Triggered Reveal
```tsx
function ScrollReveal({ children }: { children: React.ReactNode }) {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
{children}
);
}
```
### 5. Scroll-Linked Progress
```tsx
function ScrollProgress() {
const { scrollYProgress } = useScroll();
const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 });
return (
);
}
```
### 6. Gesture-Driven Interactions
```tsx
function DraggableCard({ children }: { children: React.ReactNode }) {
const x = useMotionValue(0);
const rotateZ = useTransform(x, [-200, 200], [-15, 15]);
const opacity = useTransform(x, [-200, -100, 0, 100, 200], [0.5, 1, 1, 1, 0.5]);
return (
{
if (Math.abs(info.offset.x) > 150) {
// Trigger swipe action
}
}}
>
{children}
);
}
```
### 7. Layout Animation (Reorder)
```tsx
function ReorderableList({ items, onReorder }: ReorderableListProps) {
return (
{items.map((item) => (
{item.content}
))}
);
}
```
### 8. Page Transitions (Next.js App Router)
```tsx
// app/template.tsx
"use client";
function Template({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
export default Template;
```
## Spring Presets
| Name | stiffness | damping | Use Case |
|------|-----------|---------|----------|
| Snappy | 500 | 30 | UI toggles, tabs, small elements |
| Smooth | 300 | 24 | Cards, panels, medium elements |
| Gentle | 200 | 20 | Page transitions, large elements |
| Bouncy | 600 | 12 | Playful UI, notifications, badges |
| Heavy | 150 | 30 | Modals, drawers, overlays |
## Performance Guidelines
- Use `layout` prop only on elements that actually change position
- Avoid animating `width`/`height` — use `scale` transforms instead
- Set `layout="position"` when only position changes (not size)
- Use `layoutId` for cross-component shared transitions
- Wrap expensive children in `motion.div` with `layout={false}` to opt out
- Use `useMotionValueEvent` over `useEffect` for motion value changes
## Accessibility
```tsx
function AccessibleAnimation({ children }: { children: React.ReactNode }) {
const prefersReducedMotion = useReducedMotion();
return (
{children}
);
}
```