How to time an animated product demo

Budget time for orientation, action, and reading; keep cursor movement natural; and adapt a scene when the final narration runs longer.

An animated product demo needs time for the viewer to find the relevant part of the interface, follow the action, and inspect its result. A sequence can feel rushed even when the cursor moves slowly, because the useful information disappears before anyone can read it.

Begin with the concept flow and visual sequence. Give each scene a minimum duration based on what it asks the viewer to understand. Write narration to that picture, make the audio, and then adjust the timing against the actual read. A target film length helps limit the scope. Each interaction still needs enough time to remain intelligible.

Budget the scene by its demands

The viewer needs to identify the relevant surface before following a change on it. After the action, the result must remain readable. Those intervals can overlap when the scene stays clear, but an editor needs to account for each demand.

For a fictional DispatchDesk routing demo, an initial visual plan might look like this:

IntervalWhat happensWhy the time exists
0.0–1.2 sA checkout ticket and its urgent label are visible.Establish the object before it moves.
1.2–2.5 sThe routing condition becomes the focal point.Let the viewer connect the ticket category to the rule.
2.5–3.2 sThe rule runs and the assignment changes.Show the causal transition.
3.2–5.5 sThe assigned ticket remains legible.Read Payments and compare the preserved urgency.

These are illustrative editing choices. Test them at the intended playback size. A label easy to read on a large editing monitor may need a closer composition on a phone; adding time alone will not make tiny text legible.

Open full-size image in a new tab. A frame from the Git push lesson shows the deployment dashboard near the end of its rollout passage, retaining the instance list and runtime logs for comparison.
The deployment state and log need to be read together. Reserve a settled interval for that comparison instead of treating every frame after the main movement as removable time.Film still · staged exampleView full size ↗Full source film

Preserve the action's own rhythm

A cursor movement should have its own start, travel, settle, and click. If the scene grows from six seconds to nine seconds, stretching the cursor's travel by the same proportion may make a simple action feel oddly hesitant.

Keep short physical actions separate from flexible intervals. You can lengthen the time before a click to let the viewer find the target, or extend the settled result afterward. The actual movement should still suit the distance and behavior being depicted.

Apply the same judgment to camera moves. A camera can redirect attention from a rule to its result, but a long move that hides both surfaces delays the explanation. Establish what the viewer needs to compare before choosing a motion effect.

Decide how each event responds to a longer read

The ticket needs to appear near the scene start so the viewer can identify it. The assignment belongs with the spoken destination phrase, while the transition belongs after the result has had its reading time. These events therefore respond differently to a longer scene.

A repeated sequence can derive its spacing from an available interval. For example, three routing results may appear through the clause that describes them. Reserve enough time after the final appearance to inspect the completed group.

Write these relationships in the visual beat map. They explain how the edit should adapt, which is more useful than a collection of unexplained absolute timestamps.

Distinguish a reading hold from waiting

A still frame can be doing valuable work. In the DispatchDesk example, holding the assigned ticket lets the viewer verify that its urgency survived. Adding bouncing icons during that comparison would compete with the information being read.

A hold becomes unhelpful when the visual explanation has finished and the narration continues into unrelated material. The extra words determine the repair. Another concept needs its own scene; a repeated claim can be cut. A useful explanation of an unseen relationship needs a corresponding visual.

Do not solve every gap with continuous motion. Keep movement that communicates ongoing work, a meaningful change, or a deliberate shift in attention. Judge stillness by its purpose in the sequence.

The chat retains the previous result while the follow-up question is asked and the next reply arrives. The pause belongs to an understandable exchange rather than an unrelated wait for narration.Film excerpt · staged exampleOpen 7-second excerpt ↗Original audioFull source film

Recalculate the sequence after audio changes

Use VO sync to derive a scene duration from the larger of its visual minimum and its audio requirements. Generate downstream scene starts from those durations. This prevents a longer take from overlapping the next scene while preserving the visual floor.

Then inspect local choreography. A duration calculation can keep a sentence intact while its key word moves away from the assignment event. The phrase synchronization pass catches that separate problem.

Calculate the effect of one longer take

The example's visual draft needs 5.5 seconds. Suppose its recorded line lasts 6.4 seconds and needs a 0.4-second pause afterward, with no lead-in. The final scene therefore needs 6.8 seconds, or 204 frames at 30 fps.

That adds 1.3 seconds to the visual draft. Assign the time a purpose before distributing it. The rule may need a longer comparison with the ticket, or the priority field may need to remain visible through a later phrase. Keep the cursor's travel separate from those holds.

Record the revision in the beat map:

Visual minimum: 5.5 seconds
Recorded audio: 6.4 seconds
Audio lead-in: 0 seconds
End pause: 0.4 seconds
Calculated duration: 6.8 seconds / 204 frames at 30 fps
Revision: Keep the condition and ticket visible through the matching clause.
Place the assignment against the destination phrase in the actual take.
Review: Check that the final priority field remains readable before the cut.

The runnable VO-sync exercise demonstrates the same calculation across several scenes. Its fictional visual minimums differ because it divides the demonstration into a different scene plan.

Run a timing review on the complete cut

Watch at normal speed without stopping, then make timestamped notes. Check that the narrator names visible objects and that the viewer can connect each cause to its result. Leave enough time to read the settled state. Check the transitions too: two individually clear scenes can still form an abrupt cut.

Use the review scorecard to record a specific change such as “keep the assigned team visible through the urgency clause.” That gives the next edit a concrete purpose and makes it possible to verify that the timing improved.

Make your next product video.

Try a free animation, make a film with the system, or have 20cuts plan and make it.

Have a question? Send us a message.