Animation Libraries

Framer Motion, React Spring, and complex animation orchestration.

Overview

Animation libraries provide powerful tools for creating smooth, performant animations.

Key Concepts

• Framer Motion — Declarative animations with physics-based springs
• React Spring — Hook-based animations with interpolation
• GSAP — Professional-grade animations with timeline control
• AnimatePresence — Animate components on enter/exit
• Layout Animations — Animate layout changes smoothly

Code Examples

import { motion, AnimatePresence } from 'framer-motion';

// Stagger children animation
function StaggerList({ items }) {
  return (
    <motion.ul
      initial="hidden"
      animate="visible"
      variants={{
        visible: { transition: { staggerChildren: 0.1 } }
      }}
    >
      {items.map(item => (
        <motion.li
          key={item.id}
          variants={{
            hidden: { opacity: 0, y: 20 },
            visible: { opacity: 1, y: 0 }
          }}
        >
          {item.text}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// Page transitions
function PageTransition({ children, routeKey }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={routeKey}
        initial={{ opacity: 0, x: 20 }}
        animate={{ opacity: 1, x: 0 }}
        exit={{ opacity: 0, x: -20 }}
        transition={{ duration: 0.3 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

// Gesture animations
function DraggableCard() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      dragElastic={0.1}
    >
      Drag me!
    </motion.div>
  );
}

Practice

Build an animated dashboard with page transitions, staggered list animations, and draggable cards.