Animation & Motion Design

Create smooth, purposeful animations that enhance user experience.

Instructions

1. Animate with purpose - Every animation should serve a function
2. Keep it subtle - 200-400ms for most UI transitions
3. Respect reduced motion - Honor user preferences
4. Optimize performance - Use transform and opacity
5. Use consistent easing - Create a motion language

Framer Motion Basics

Simple Animations

import { motion } from 'framer-motion';