Timing, spacing & rhythm
Also searched as: timing and spacing, timing, spacing, dwell time, temporal rhythm, motion cadence
Canonical Definition
Timing is the number of frames an action takes; spacing is the variation in position between successive frames; rhythm is the overarching cadence governing the pace of cuts and arrivals.
Fast gesture: 8-15 frames; Standard reveal: 18-24 frames; Major scene transition: 30-45 frames
Timing and spacing are the bedrock of the 12 Principles of Animation. Two animations can have the exact same duration (30 frames) but completely different spacing: one moves evenly, while the other covers 80% of the distance in the first 5 frames.
In commercial motion design, timing must respect human cognitive reading speeds. A title card must dwell long enough to be absorbed, while UI transitions must clear fast enough to maintain forward momentum.
The Three-Beat Cadence Rule
Anticipation, Action, and Resolution across musical bars
Effective motion design aligns with the rhythmic structure of music: beat 1 sets up anticipation, beat 2 executes the high-speed transit, and beat 3 delivers the settlement.
How this works: Rhythmic spacing applied across multiple cards with structured beat intervals.
- Frame-perfect interval spacing between consecutive items
- Accelerating cadence to build excitement
- Prevents cognitive fatigue by organizing visual intake
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Alternate between high-velocity moments (rapid cuts, quick transitions) and calm rest beats (dwell on key claims).
Common Failure Modes (What to avoid)
- Uniform timing: when every cut, card, and caption lasts exactly 60 frames, the video becomes hypnotic and viewers zone out.
Build timing, spacing & rhythm in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Staggering & cascades
Staggering is the deliberate time offset applied between multiple related elements in a group, so they enter sequentially in cascade rather than appearing simultaneously.
Motion FundamentalsEasing & easing curves
Easing is the rate at which an animated value changes over time — the mathematical curve defining whether motion accelerates, decelerates, or maintains mechanical constant velocity.
Motion FundamentalsSpring physics & overshoot
Spring physics is a physical simulation model based on Hooke's Law that computes motion from mass, tension (stiffness), and friction (damping), producing organic overshoot and settlement.