SKILL.md

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)

: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 &#x26;&#x26; (

    <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 &#x26;&#x26; (

      <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

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:

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

animate