Frame-Accurate Disney Timing

Classic Disney timing techniques adapted for digital video production. Frame-by-frame control for maximum impact.

Core Concepts

Ones vs Twos

Traditional animation terminology for drawing frequency:

At 24fps:
- On ones: 24 drawings/second (film)
- On twos: 12 drawings/second (typical animation)
- On threes: 8 drawings/second (budget animation)

At 30fps (Remotion default):
- On ones: 30 drawings/second
- On twos: 15 drawings/second
- On threes: 10 drawings/second

Frame Holds

Pausing motion at key moments for emphasis:

Jump Animation (30fps):

Frame 1-3:   Anticipation (crouch)
Frame 4-5:   Takeoff (fast)
Frame 6-8:   HOLD at apex <-- Emphasis!
Frame 9-10:  Fall (fast)
Frame 11-14: Landing squash + settle

Remotion Implementation

Frame Hold Utility

import { useCurrentFrame, interpolate } from 'remotion';

interface FrameHoldConfig {
  holdFrame: number;
  holdDuration: number;
}

export const useFrameWithHolds = (holds: FrameHoldConfig[]) => {
  const frame = useCurrentFrame();
  let adjustedFrame = frame;
  let totalHoldsPassed = 0;

  for (const hold of holds) {
    if (frame >= hold.holdFrame && frame < hold.holdFrame + hold.holdDuration) {
      return hold.holdFrame - totalHoldsPassed;
    } else if (frame >= hold.holdFrame + hold.holdDuration) {
      totalHoldsPassed += hold.holdDuration;
    }
  }

  return frame - totalHoldsPassed;
};

On Twos Animation

export const useFrameStepping = (
  stepping: 1 | 2 | 3 = 1,
  offset: number = 0
) => {
  const frame = useCurrentFrame();
  return Math.floor((frame + offset) / stepping) * stepping;
};

Disney Anticipation Timing

const DisneyTimingRatios = {
  subtle: { anticipation: 0.15, action: 0.35, settle: 0.50 },
  medium: { anticipation: 0.20, action: 0.35, settle: 0.45 },
  dramatic: { anticipation: 0.30, action: 0.30, settle: 0.40 }
};

Frame Reference Table

Common Timing Mistakes

1. No holds - Motion feels floaty without key holds
2. Equal spacing - Real motion accelerates/decelerates
3. Too smooth - Sometimes choppy (on twos) looks better
4. Missing anticipation - Actions feel unmotivated
5. Rushed settle - Need time for secondary motion

Related Skills

• motion-principles/ - Disney 12 principles
• duration/ - Duration tokens and timing
• easing/ - Easing curves for timing
• remotion/ - Remotion-specific implementations
• motion-blur/ - Blur based on frame timing

See references/ for complete Disney bounce keyframe breakdowns.