Duration & Timing

Industry-standard duration tokens with cross-system comparison.

Standards Reference

M3 Duration Scale (Primary)

Load from: tokens/duration.tokens.json

Selection Guide

MICRO-INTERACTION?     → short-1 to short-2 (50-100ms)
SMALL COMPONENT?       → short-3 to short-4 (150-200ms)
MEDIUM COMPONENT?      → medium-1 to medium-2 (250-300ms)
LARGE TRANSITION?      → medium-3 to medium-4 (350-400ms)
PAGE/NAV CHANGE?       → long-1 to long-2 (450-500ms)

Cross-System Comparison

Frame Conversion

Implementation

JavaScript

import tokens from '../tokens/duration.tokens.json';

const duration = tokens.motion.duration;
const ms = parseInt(duration['medium-1'].$value); // 250

// Convert to seconds for GSAP
gsap.to('.element', { x: 100, duration: ms / 1000 });

Remotion (frames at 30fps)

const msToFrames = (ms, fps = 30) => Math.round((ms / 1000) * fps);

// medium-1 (250ms) = 8 frames at 30fps
const frames = msToFrames(250, 30);

Dynamic Duration Calculation

Static durations are amateur. Google calculates duration based on context.

Distance-Based Duration

function durationFromDistance(distancePx) {
  const BASE_DURATION = 300; // ms
  const BASE_DISTANCE = 300; // px

  // Square root scaling feels natural
  const scale = Math.sqrt(distancePx / BASE_DISTANCE);
  const duration = BASE_DURATION * scale;

  // Clamp to M3 range
  return Math.max(100, Math.min(500, Math.round(duration)));
}

// Examples:
durationFromDistance(100);  // 173ms
durationFromDistance(300);  // 300ms
durationFromDistance(600);  // 424ms
durationFromDistance(1000); // 500ms (capped)

Area-Based Duration

function durationFromArea(startArea, endArea) {
  const change = Math.abs(endArea - startArea);
  const max = Math.max(startArea, endArea);
  const ratio = change / max;

  const BASE = 250;
  const scale = 1 + (ratio * 0.5);

  return Math.min(500, Math.round(BASE * scale));
}

Platform Multiplier

function platformDuration(baseDuration) {
  const width = typeof window !== 'undefined' ? window.innerWidth : 1920;

  if (width >= 1024) return Math.round(baseDuration * 0.7);  // Desktop: 30% faster
  if (width >= 768) return Math.round(baseDuration * 0.85); // Tablet: 15% faster
  return baseDuration; // Mobile: baseline
}

Enter vs Exit Asymmetry

Google M3 requires exits to be 30% faster than enters.

function asymmetricDurations(baseDuration) {
  return {
    enter: baseDuration,
    exit: Math.round(baseDuration * 0.7)  // 30% faster
  };
}

// Usage:
const { enter, exit } = asymmetricDurations(300);
// enter: 300ms, exit: 210ms

Load ratio from: tokens/sequencing.tokens.json → motion.sequencing.choreography.enter-exit-ratio

See references/duration-by-context.md for contextual selection. See references/frame-conversion.md for all frame rate tables.