A useful motion graphic explains an idea through deliberate timing and visual change. Learn to storyboard a short message, build clear static frames, animate a few properties, and review whether motion improves understanding. This roadmap creates a fictional twenty-second explainer showing how a library reservation moves from request to collection. The aim is readable cause and effect, not constant movement or a long list of software effects.
Write the message and storyboard first
Use four stages: choose a book, send a reservation request, wait for confirmation, and collect the book. Write a short sentence for each stage and sketch the key frame. The viewer should understand the sequence from the still storyboard before anything moves. If the message is unclear in static form, animation is unlikely to repair it.
Set a twenty-second practice duration with five seconds per stage. This is a constraint for the exercise, not a universal attention rule. Include time for reading, not just movement. Create original simple shapes or use assets with a suitable licence. Keep text editable in the project and record where each graphic came from.
Learn keyframes and timing with one object
Animate a small book icon moving from a catalogue card to a reservation tray. Set its starting and ending positions, then inspect the motion between them. Change only one property at first so the relationship between time and value is easy to see. Blackmagic Design’s training includes Fusion motion-graphics learning material Source 1; use the official instructions for your chosen tool.
Compare constant-speed movement with a movement that eases into or out of the endpoint. MDN’s timing-function reference explains how progress can vary over an animation’s duration in a web context Source 2. The software controls differ, but the useful question is the same: does the timing make the action readable and appropriate to the message?
Avoid making every object bounce. A book settling into a tray may need a restrained stop, while a confirmation tick may simply appear after the request completes. Motion should communicate sequence, relationship, or emphasis. Write the reason for each animated property in a short note beside the storyboard.
Build the complete fictional explainer
Use a consistent background, type hierarchy, and colour role for each stage. Show the request moving to a waiting state before confirmation appears. This prevents the graphic from implying that pressing Reserve instantly guarantees collection. The fictional process requires confirmation, so the animation must preserve that dependency.
In the worked exercise, the first draft displays “Collect your book” before the confirmation icon appears. The expected review finding is a misleading order. Repair the timing so confirmation completes before the collection instruction. Then ask a viewer to describe the process without seeing the storyboard. They should mention waiting for confirmation, not immediate collection.
Keep text on screen long enough to read at the intended size. Test the explainer on a phone and without sound. If narration adds essential information, provide appropriate captions or text support. A fast kinetic title sequence may look energetic while failing the basic task of explaining four steps.
Review motion and deliver useful alternatives
Avoid rapid flashing and unnecessary large movements. For interactive web delivery, W3C’s guidance on animation from interactions discusses supporting the ability to disable non-essential motion Source 3. Do not apply that specific criterion as a blanket rule for every video format; instead, identify the delivery context and plan suitable controls and alternatives.
Export the explainer and inspect the actual playback file. Check text edges, timing, missing frames, audio synchronisation, and the final hold. Provide a static four-panel summary that preserves the process for readers who prefer still information. A useful alternative should contain the same essential steps, not merely a decorative thumbnail.
Package the storyboard, source project, final export, static summary, and a short explanation of the timing correction. Your next exercise can introduce a chart or a more complex transition, but only after you can make a simple sequence clear. The strongest beginner evidence is the ability to explain why movement is present and remove it when it adds confusion.
- ScriptState one message in four steps.
- FramesMake the still layouts understandable.
- MotionAnimate only purposeful properties.
- ReviewTest sequence, readability, and alternatives.
| Checkpoint | What to produce | How to review it |
|---|---|---|
| Storyboard | Four readable still frames | Process makes sense without motion |
| Timing | Five-second practice stages | Text has reading time |
| Dependency | Confirmation before collection | No implied immediate guarantee |
| Alternative | Static four-panel summary | Essential message remains available |
- Position change
- Shows the request moving between process stages.
- Appearance change
- Signals that confirmation has arrived.
- Unnecessary bounce
- Adds movement without explaining the process.
Common questions
Do I need drawing skills to learn motion graphics?
You can begin with simple shapes, readable typography, and a clear storyboard. Drawing skill can expand your options later, but the first challenge is explaining a sequence through timing and hierarchy. Use original basic assets and focus on whether a viewer understands the process. Elaborate illustration is not a substitute for a coherent message.
What should I animate first?
Start with position or opacity on one object. Observe the beginning, end, and transition between them before combining properties. This makes timing errors easier to diagnose. Once the motion feels purposeful, add another element with a clear relationship. Animating everything simultaneously can conceal which change is responsible for confusion.
Is easing always better than constant speed?
No. Easing changes the character and perceived timing of movement, but the right choice depends on the message. A mechanical progress indicator may need a different treatment from an object settling into place. Compare alternatives and explain the effect. Avoid applying the same dramatic curve to every movement simply because it looks polished.
How do I decide how long text stays visible?
Test it with realistic viewers at the intended playback size. Include time to notice the text, read it, and understand its relation to the graphic. If the sentence is too long, simplify the wording or extend the hold. Do not rely only on how quickly you can read text you already know.
Can motion make a process misleading?
Yes. Showing collection before confirmation implies a different service rule from the fictional brief. Timing and order carry meaning, just as words do. Review dependencies explicitly and ask a viewer to describe the process. Correct the animation if their account reflects a false sequence created by your visual choices.
Should I add music and narration?
Add them when they improve understanding or suit the brief. They introduce additional rights, mixing, and accessibility work. Check the animation without sound to understand what the visuals convey alone. If narration carries essential information, provide an appropriate equivalent so the message is not available only to someone who can hear it.
What does a reduced-motion alternative look like?
For this exercise, a static four-panel explanation preserves the essential sequence. In an interactive website, consider user motion preferences and controls according to the delivery requirements. The alternative should communicate the same information. Simply removing all animation without replacing a meaning-bearing transition can leave the process incomplete.
What belongs in a motion-design case study?
Show the message, storyboard, key frames, timing decisions, final animation, and an alternative format. Explain one revision, such as correcting the confirmation sequence. Include asset rights and your actual role. A reviewer should see how motion served comprehension rather than only a showreel of effects with no underlying communication problem.
Continue your learning
Video Editing Roadmap: Turn Raw Clips into a Finished Short Film. UI Design Learning Roadmap: Build a Consistent Interface from a Brief.
Sources and further reading
- Blackmagic Design training — Fusion and motion-graphics learning resources.
- MDN: timing functions — Timing functions control progress over animation duration.
- W3C: interaction animation — Non-essential interaction animation and user control.
Skills & Learning Desk
MP Job Hub’s organisational byline for sequenced practice, course evaluation and useful learning habits.
Skill roadmaps · Learning resources · Practice projects
View profile →Read our research process or request a correction.
