Transition Patterns

M3-based transition patterns for navigation and state changes.

Standards Reference

Pattern Overview

Container Transform

Use when an element transforms into a full view (card → detail).

Characteristics

• Origin element morphs into destination
• Maintains spatial relationship
• Creates strong visual connection

Token

{
  "duration": "{motion.duration.long-2}",
  "easing": "{motion.easing.emphasized}"
}

Implementation (Framer Motion)

<motion.div
  layoutId="card-1"
  transition={{ duration: 0.5, ease: [0.2, 0, 0, 1] }}
>
  {isExpanded ? <DetailView /> : <CardView />}
</motion.div>

Shared Axis

Use for sequential navigation (wizard steps, tabs).

Characteristics

• Elements move along X, Y, or Z axis
• Outgoing fades out while moving
• Incoming fades in while moving

Variants

• X-axis: Horizontal navigation (tabs)
• Y-axis: Vertical navigation (lists)
• Z-axis: Depth changes (dialogs)

Token

{
  "duration": "{motion.duration.medium-4}",
  "easing": "{motion.easing.emphasized}"
}

Implementation (Framer Motion)

const variants = {
  enter: (direction) => ({
    x: direction > 0 ? 100 : -100,
    opacity: 0
  }),
  center: { x: 0, opacity: 1 },
  exit: (direction) => ({
    x: direction < 0 ? 100 : -100,
    opacity: 0
  })
};

<AnimatePresence custom={direction}>
  <motion.div
    key={page}
    custom={direction}
    variants={variants}
    initial="enter"
    animate="center"
    exit="exit"
    transition={{ duration: 0.4, ease: [0.2, 0, 0, 1] }}
  />
</AnimatePresence>

Fade Through

Use for unrelated content with no spatial relationship.

Characteristics

• Outgoing fades out completely
• Incoming fades in
• Brief overlap or sequential

Token

{
  "duration": "{motion.duration.medium-2}",
  "easing": "{motion.easing.standard}"
}

Implementation (CSS)

.fade-through-exit {
  animation: fadeOut 150ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
.fade-through-enter {
  animation: fadeIn 150ms cubic-bezier(0.2, 0, 0, 1) 150ms forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Decision Guide

Is there a persistent element that transforms?
  → Container Transform

Is navigation sequential (steps, tabs)?
  → Shared Axis

Are views unrelated?
  → Fade Through

Web vs Video Transitions

CRITICAL: Web and video transitions have different timing needs.

Video-Specific Durations

Use these tokens for video content (from duration.tokens.json):

Avoid Pixel Dissolve

Never use pixel/dither dissolve for standard video transitions. It:

• Feels dated/VHS-era
• Takes too long visually
• Distracts from content

Use simple opacity crossfade (video.crossfade) instead.

Implementation (Remotion)

import { videoTransition } from '../presets/remotion-m3';

// Quick crossfade between scenes
const opacity = interpolate(
  frame,
  [exitStart, exitStart + videoTransition.crossfade.frames(fps)],
  [1, 0],
  { extrapolateRight: 'clamp' }
);

// Or use the helper
const transitionFrames = getVideoTransitionFrames('crossfade', fps);

See references/container-transform.md for detailed implementation. See references/shared-axis.md for axis variations. See references/fade-through.md for timing patterns.