Framer Motion Animation Patterns

Overview

Framer Motion simplifies complex animations in React. This collection provides battle-tested patterns for page transitions, component animations, and gesture-driven interactions.

Key Features

• Spring Physics: Natural, performant animations
• Gesture Support: Drag, hover, and tap interactions
• Variants: Orchestrate complex multi-element animations
• SVG Support: Animate paths, transforms, and properties
• Exit Animations: Smooth transitions when components unmount

Quick Start

Install and import:

npm install framer-motion

Basic Animation

import { motion } from 'framer-motion'

export function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      Hello World
    </motion.div>
  )
}

Staggered List Animation

<motion.ul variants={containerVariants} initial="hidden" animate="show">
  {items.map((item) => (
    <motion.li key={item.id} variants={itemVariants}>
      {item.name}
    </motion.li>
  ))}
</motion.ul>

Page Transition

<AnimatePresence mode="wait">
  <motion.div
    key={pathname}
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    exit={{ opacity: 0 }}
  >
    {children}
  </motion.div>
</AnimatePresence>

Framer Motion handles GPU acceleration automatically for optimal performance.