Produce motion and video through separate workflows

Work with timing, states, editing and sound

Suggested reading time: about 8 minutes. This is an editorial production guide. Generation, performance and pricing comparison experiments have not been run.

Learning goals

• Distinguish an animation from an exported video.
• Design the purpose of motion and the state transitions.
• Check consistency over time.

Application state controls visible motion

1. 1User action
2. 2Running state
3. 3Confirmed result
4. 4Success or failure state
5. 5Matching expression and permitted actions

1. 1Elapsed time
2. 2Animation values
3. 3Visible frame

This original state diagram keeps result confirmation separate from animation progress. A moving indicator is evidence of its own playback, not evidence that a request succeeded; the timing path also allows pause and reduced-motion behavior.

Who does this work?

• Motion designer: intention and timing of movement.
• Video editor: shot order and pacing.
• Sound designer: meaning and balance of audio.
• Developer: connect application states to behavior.

Inputs

• The message and final format.
• A script or state diagram.
• Rights to use assets and audio.
• Duration, resolution and output format.

Production workflow

1. Complete the information design in a static state.
2. Choose each moving element and its purpose.
3. Validate with a low-quality rough edit or simple state transitions.
4. Replace assets and check temporal consistency.
5. Check stopping behavior, captions, audio and export.

Outputs

• A working UI or edited video.
• A script, state diagram and timing settings.
• Source assets and the final output.

Decide what changes first

Animation changes values in response to time or input. A UI may change opacity or position, a 3D scene may change bones or the camera, and pixel art may change the displayed frame. Keyframes define values at important times; interpolation calculates the changes between them; easing distributes the speed of those changes. Before adding movement, decide whether it announces an arrival, returns the result of an action, or guides attention.

Visual movement and application state

An animated submit button does not mean a network request has completed. Design states such as idle, running, success and failure separately from the actions allowed in each state. Adding a fixed amount on every display update can make speed depend on the device’s refresh rate, so use elapsed time to drive movement.

A video is finished by editing shots

Video production can be separated into script, storyboard, rough edit, generated or filmed assets, editing, sound, captions and export. A single AI-video output is a shot used as source material. Check that people’s shapes, object positions, light and motion remain consistent between frames. A good thumbnail alone does not guarantee the quality of the whole video.

Motion should also be stoppable

Provide pause and reset controls in interactive demos. Excessive coupling to scrolling can interfere with reading the content. For video, provide the captions, volume controls and display time the message requires. Choose the length of a short social-media video while checking whether its information can be understood. This course makes no claim that any particular number of seconds always increases reach.

Quality checklist

• Movement supports the order of information.
• Repeated clicks and failure cases do not break the state.
• Check shape and ground contact through the beginning, middle and end.
• Captions remain on screen long enough to read.

Diagnose failures

Symptom	Likely cause	Next step
The result is lively, but viewers do not know where to look.	Several elements move strongly at the same time.	Choose one focal element and introduce staggered timing and still intervals.
Faces or props change midway through the video.	Temporal consistency has broken down.	Split the problem shot into shorter pieces and test references, editing or another take.

Exercise: A UI with a responsive guide character

Status: not run (not-run). This is a planned exercise, not a measured result.

Task: Define four states—idle, running, success and failure—and assign the expression and movement each state needs.

Deliverable: A state table and interactive demo.

Completion criteria: The meaning remains clear during repeated clicks, errors and reduced-motion settings.

Related Catalog candidates and practice

Prerequisite chapters: Map the work and production process · Design a consistent character

• Interaction feedback for buttons and cards (Catalog candidate: animation-ui-feedback)
• Section reveals on scroll (Catalog candidate: animation-scroll-reveal)
• Page and modal transitions (Catalog candidate: animation-page-transition)

Use the experiment worksheet for your plan and evidence

Open the experiment notebook

Primary sources

• MDN requestAnimationFrame — verified: 2026-10-03
• Aseprite Animation — verified: 2026-10-03

Source scope checked on 2026-10-04

requestAnimationFrame schedules one callback; another frame needs another request. Its timestamp supports elapsed-time animation. Background-tab pauses belong in the measurement conditions, not in a fixed-FPS assumption.