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

Animation Type	Easing	Duration
Element entering	`ease-out`	200-300ms
Element moving on screen	`ease-in-out`	200-300ms
Element exiting	`ease-in`	150-200ms
Hover effects	`ease`	150ms
Opacity only	`linear`	varies

CSS Custom Properties (Recommended)

css

: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

css

.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

css

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

3. Fade In on Mount (Framer Motion)

tsx

<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

tsx

<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)

tsx

{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

tsx

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

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

Examples

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

Example	Description	Key Techniques
`card-hover.tsx`	Slide-up description on hover	CSS transitions, transform, opacity
`toast-stacking.tsx`	Animated toast notifications	CSS custom properties, data-* triggers
`text-reveal.tsx`	Staggered letter animation	@keyframes, animation-delay, calc()
`shared-layout.tsx`	Element position/size morph	Framer Motion layoutId
`animate-height.tsx`	Smooth height changes	useMeasure, animate height
`multi-step-flow.tsx`	Directional step wizard	AnimatePresence, custom variants
`feedback-popover.tsx`	Button-to-popover expansion	Nested layoutId, form states
`app-store-card.tsx`	iOS-style card expansion	Multiple layoutId elements

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

Scenario	Recommended Approach
Simple hover effects	CSS transitions
Enter/exit animations	Framer Motion + AnimatePresence
Layout changes	Framer Motion `layout` prop
Shared element transitions	Framer Motion `layoutId`
Scroll-linked animations	Framer Motion `useScroll`
Complex orchestrated animations	Framer Motion variants
Drag interactions	Framer Motion drag gestures
Performance-critical	CSS-only with transforms

Dependencies

For Framer Motion examples, install:

bash

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