Timing and Spacing: Making Motion Graphics Feel Intentional

Timing and Spacing: Two Levers That Control How Motion Feels

Timing is how long something takes (duration). Spacing is how far something travels between moments in time (the distribution of positions across frames). Viewers don’t experience these as separate technical ideas—they experience them as intent: confident, calm, urgent, playful, heavy, or precise.

A useful mental model: timing sets the rhythm, and spacing sets the perceived speed. You can keep the same duration but change spacing to make motion feel fast at the start and slow at the end (or the opposite).

How Spacing Changes Perceived Speed (Even When Duration Stays the Same)

Imagine an object moving from left to right over 1 second:

• Even spacing (same distance each frame) reads as constant speed and often feels mechanical.
• Wide spacing early, tight spacing late reads as fast then slow (ease out), often feels intentional and readable.
• Tight spacing early, wide spacing late reads as slow then fast (ease in), often feels like building momentum.

If your software shows a motion path with dots per frame, those dots are literally spacing: dots close together = slower; dots far apart = faster.

1) Defining Duration by Readability and Emphasis

Duration should be chosen based on what the viewer must understand and what you want them to notice. A clean rule: readability first, style second.

Continue in our app.

You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.

Or continue reading below...

Download the app

Duration Checklist: Readability

• Can the viewer recognize the object? Icons and simple shapes need less time than detailed illustrations.
• Can the viewer read the text? Longer words, smaller type, or low-contrast text needs more time on screen.
• Is there a change in meaning? If the motion introduces a new idea (new label, new number, new category), give it more time.

Duration Checklist: Emphasis

• Important = slower (more screen time, gentler spacing, often a brief hold).
• Unimportant = faster (shorter duration, quicker spacing, minimal hold).
• Surprising = contrast (a fast move into a slow settle, or a slow approach into a quick snap).

Practical Starting Ranges (Adjust to Your Style)

These are not “rules,” they’re starting points. Your job is to tune them to the message.

2) Using Holds vs Moves (And Why Holds Create Clarity)

A hold is intentional stillness: the object stays in place (or nearly in place) for a moment. Holds are not “dead time”—they are where comprehension happens.

When to Hold

• Before a move to build anticipation (viewer prepares for change).
• After a move to let the viewer register the new state (viewer confirms meaning).
• On key information (headline, number, label) so it can be read without competing motion.

When to Keep Moving

• During connective tissue (secondary elements that guide attention but aren’t the message).
• When you want energy (continuous motion can feel lively, but it must not block reading).

Step-by-Step: Building a Simple “Hold–Move–Hold” Pattern

1. Choose a single element (a box, circle, icon, or text block).

2. Set a start hold: keep it still for about 4–8 frames (at 24 fps) or 0.15–0.30 s.

3. Move it to the new position over 0.25–0.60 s depending on importance.

4. Set an end hold: keep it still for 6–12 frames (or longer for important text).

5. Adjust spacing: make the move start with wider spacing and end with tighter spacing if you want a confident settle (common for UI/infographic motion).

If the move feels “floaty,” shorten the duration or increase the contrast between move and hold. If it feels “jarring,” lengthen the duration slightly or soften the spacing near the start/end.

3) Matching Timing to Message Beats

Motion graphics often follow a sequence of message beats: setup → reveal → reinforce → transition. Timing should support that structure so the viewer always knows what to look at.

Beat-Based Timing Strategy

• Setup: slightly slower than you think; the viewer is orienting. Use holds to establish layout.
• Reveal: give the main point room. Slower reveals, cleaner spacing, fewer competing moves.
• Reinforce: can be quicker; small accents (underline, highlight, bounce-less emphasis) work well.
• Transition: typically fast; it’s connective, not the message.

Practical Step-by-Step: Timing a 4-Beat Mini Sequence

1. Beat 1 (Setup): background and frame elements appear quickly (0.20–0.40 s), then hold briefly (0.15–0.30 s).

2. Beat 2 (Reveal): headline or key icon reveals slower (0.50–0.90 s) with a clean settle and an end hold (0.30–0.60 s).

3. Beat 3 (Reinforce): supporting detail (subhead, label, small chart tick) pops in faster (0.20–0.45 s) and holds.

4. Beat 4 (Transition): exit or rearrange quickly (0.15–0.35 s) to get out of the way of the next idea.

Notice the pattern: important beats get time and stillness; connective beats get speed.

4) Simple Timing Rules You Can Apply Immediately

Rule A: Fast Transitions, Slower Reveals for Important Text

• Transition (between ideas): keep it short and decisive so it doesn’t steal attention.
• Reveal (the idea itself): slow down and add a hold so the viewer can read.

Example: If a title slides in, let the slide take 0.60 s and then hold for 0.50 s. If a divider line wipes between sections, keep it around 0.20 s.

Rule B: One Primary Motion at a Time During Reading

If text is being read, avoid simultaneous large moves elsewhere. If you must animate multiple elements, stagger them by 2–6 frames so the viewer’s attention is guided rather than split.

Rule C: Use Contrast to Signal Importance

Make the important thing different in timing: slower, longer hold, smoother spacing. Make the secondary thing quicker and simpler. Timing contrast is often more effective than adding extra effects.

Rule D: If It Feels Late, It’s Probably Late

Beginners often let motion linger. If you feel impatience while watching your own animation, shorten the transition durations first. Keep the holds for readability, but trim the travel time.

Hands-On Drill: Same Object, Three Timings (Snappy vs Moderate vs Slow)

This drill trains your eye to separate style preference from communication need. You will animate the same move three times and compare how viewers interpret it.

Setup

• Use a single object: a circle, square, or simple icon.
• Define two positions: A (start) and B (end), far enough apart to notice (e.g., 30–50% of the frame width).
• Keep the spacing style consistent across versions (e.g., ease out into the end) so the main variable is duration.

Version 1: Snappy

1. Start hold: 0.10–0.20 s

2. Move A→B: 0.15–0.25 s

3. End hold: 0.20–0.35 s

Typical perception: responsive, modern, energetic. Risk: can feel aggressive or hard to follow if paired with dense text.

Version 2: Moderate

1. Start hold: 0.15–0.30 s

2. Move A→B: 0.30–0.50 s

3. End hold: 0.30–0.50 s

Typical perception: confident, clear, “designed.” Often a safe default for explainer-style motion.

Version 3: Slow

1. Start hold: 0.20–0.40 s

2. Move A→B: 0.70–1.20 s

3. End hold: 0.40–0.80 s

Typical perception: calm, premium, deliberate. Risk: can feel sluggish, especially for transitions.

Compare and Write Down What Changes

After previewing all three, answer:

• Which one feels most “intentional” for your message?
• At what point do you start noticing the motion itself rather than the meaning?
• Does the slow version feel elegant or simply late?
• Does the snappy version feel crisp or stressful?

Optional: show the three versions to someone else without explaining them. Ask what each one “feels like” (urgent, calm, playful, serious). Their words reveal what your timing communicates.

Tool-Agnostic Workflow: Using Markers and Time Remapping (If Available)

You can apply timing decisions without any specific software features, but many tools include markers and time remapping (or retiming). These help you lock timing to beats and iterate quickly.

Markers: Pin Your Beats Before You Polish Motion

Markers are time notes on the timeline. Use them to define beats so you don’t “eyeball” structure.

1. Place beat markers for: setup, reveal, reinforce, transition.

2. Add sub-markers for micro-events: text starts moving, text becomes fully readable, accent appears, end hold begins.

3. Align key moments (arrive, stop, fully visible) to markers rather than aligning the start of motion. Viewers care most about when something becomes readable and stable.

4. Preview only between markers to judge pacing locally before watching the whole piece.

Time Remapping / Retiming: Change Speed Without Rebuilding Everything

Time remapping lets you speed up or slow down an animation segment after it’s made. Even if your tool doesn’t call it “time remap,” look for features like “retime,” “speed,” “stretch,” or “rate.”

Practical Uses

• Compress transitions: select the transition segment and shorten it while keeping the reveal duration intact.
• Extend readability: lengthen the end hold of important text without changing the move.
• Test three timing styles fast: duplicate the animation and apply different retiming factors (e.g., 70%, 100%, 150%).

Common Pitfall

If you retime everything uniformly, you may accidentally slow down transitions that should stay fast. Prefer retiming in sections: holds, reveals, transitions.

Manual Alternative (No Remapping Tools Needed)

If your software lacks retiming, you can still iterate quickly:

• To speed up: move the end keyframe earlier (shorter duration) and keep the same start/end positions.
• To slow down: move the end keyframe later, then add or extend a hold after it.
• To improve spacing: adjust the interpolation/handles so spacing tightens near the end for a clean settle, or widens near the end for a punchy exit.