Animation & Motion Design

Create smooth, purposeful animations that enhance user experience with Framer Motion.

Instructions

1. Animate with purpose - Motion should guide, not distract
2. Keep it fast - Most UI animations should be 150-300ms
3. Use easing curves - Never use linear timing for UI
4. Respect preferences - Honor prefers-reduced-motion
5. Optimize performance - Animate transform and opacity only

Framer Motion Basics

Setup

npm install framer-motion