Next.js Animations

Overview

This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.

Quick Reference

Easing Cheat Sheet

CSS Custom Properties (Recommended)

:root {
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
}

Common Animation Patterns

1. Hover Lift Effect

.card {
  transition: transform 200ms var(--ease-out-quint),
              box-shadow 200ms var(--ease-out-quint);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

2. Button Press

.button {
  transition: transform 100ms ease-out;
}
.button:active {
  transform: scale(0.97);
}

3. Fade In on Mount (Framer Motion)

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: [.23, 1, .32, 1] }}
>
  Content
</motion.div>

4. Modal with Exit Animation

<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  )}
</AnimatePresence>

5. Tab Indicator (Shared Layout)

{tabs.map(tab => (
  <button key={tab} onClick={() => setActive(tab)} className="relative px-4 py-2">
    {tab}
    {active === tab && (
      <motion.div
        layoutId="tab-indicator"
        className="absolute inset-0 bg-blue-500 rounded -z-10"
        transition={{ type: "spring", stiffness: 400, damping: 30 }}
      />
    )}
  </button>
))}

6. Staggered List Animation

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>

Golden Rules

1. Exits faster than enters: Exit animations should be ~75% of enter duration
2. Only animate transform and opacity: These are GPU-accelerated
3. 200-300ms is the sweet spot: Most animations should be in this range
4. Always respect prefers-reduced-motion: See accessibility section in references
5. Use springs for interruptible animations: Better UX when users interrupt

Examples

Complete working examples from the course are in the examples/ directory:

To use an example, read it with: Read examples/<name>.tsx

References

For detailed documentation, read the reference files:

• references/easing-and-timing.md - Easing functions, timing guidelines, spring configuration
• references/css-animations.md - Transforms, transitions, keyframes, clip-path
• references/framer-motion.md - Motion components, AnimatePresence, variants, layout animations, hooks
• references/performance-accessibility.md - 60fps optimization, prefers-reduced-motion, accessibility

When to Use What

Dependencies

For Framer Motion examples, install:

pnpm add framer-motion react-use-measure usehooks-ts