Animations and Transitions

CSS transitions, React Transition Group, Framer Motion, and animation patterns.

Overview

Animations improve user experience by providing visual feedback and guidance.

Key Concepts

• CSS Transitions — Simple hover and state change effects
• React Transition Group — Manage enter/exit animations
• Framer Motion — Declarative animations with physics-based springs
• Layout Animations — Animate layout changes smoothly
• Stagger Effects — Animate list items sequentially

Code Examples

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

function AnimatedList({ items, onRemove }) {
  return (
    <AnimatePresence>
      {items.map(item => (
        <motion.div
          key={item.id}
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: 'auto' }}
          exit={{ opacity: 0, height: 0, marginTop: 0 }}
          transition={{ duration: 0.3 }}
        >
          <span>{item.text}</span>
          <button onClick={() => onRemove(item.id)}>×</button>
        </motion.div>
      ))}
    </AnimatePresence>
  );
}

function Modal({ isOpen, onClose }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="modal-overlay"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          onClick={onClose}
        >
          <motion.div
            className="modal-content"
            initial={{ scale: 0.9, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0.9, opacity: 0 }}
            onClick={e => e.stopPropagation()}
          />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Practice

Build an animated todo app with smooth add/remove transitions.