Who this is for: Motion designers, content producers and creative reviewers.
What to prepare
- Approved diagram and relationships
- Which depth differences carry meaning
- Label anchor and occlusion rules
- A complete flat reference view
Separate structure from decoration
Use an illustrative educational diagram with an outer shell, an inner chamber and a connecting channel. Put those parts on three planned depth layers only if their separation explains containment. Keep background texture on a decorative layer that never crosses a label or connector.
Create a depth sketch listing each object, depth role, maximum apparent displacement and label behavior. If the diagram is conceptual rather than a measured model, say so. Depth should not make one part appear larger in a way that viewers could mistake for an actual dimensional comparison.
Bound the camera move
Start with a complete overview. Move the camera through a small planned arc that reveals the channel behind the shell, then settle into another complete view. Define the pivot at the diagram’s center and keep its main axis visible. The purpose is to reveal one relationship, not to tour every possible angle.
Check the start, middle, greatest occlusion and final view. A shell that looks transparent enough in the opening may hide the channel at the midpoint. If a label must cross another leader during the move, change its placement, shorten the arc or use a separate static detail view.
Keep annotations readable
Choose whether labels live in the model or in the viewing frame. Labels attached to rotating surfaces can become foreshortened or hidden. Fixed screen-space labels can stay readable, but their connectors need to track the correct anchors. Do not let an anchor jump to a nearer surface when the view changes.
For this illustrative lesson, keep three labels in fixed side lanes and route leaders to the parts. Pause movement while the technical sentence is read. If the explanation requires close inspection, a still view may serve it better than continuous drift. Motion is optional when the relationship is already clear.
Build the flat alternative
Create a cutaway or separated two-dimensional view that shows the same shell, chamber and channel with explicit labels. Compare its information with the moving version: containment, connection and orientation must all remain available. Replace “behind this” narration with a precise part name where necessary.
W3C’s guidance on Animation from Interactions discusses disabling nonessential interaction-triggered motion on the web and identifies parallax as a potential concern. A video alternative does not itself establish compliance for its hosting page. Review playback behavior separately, and describe the flat version as an equivalent treatment rather than a certified solution for every viewer.
Review checklist
- Every depth layer has a communication role.
- Camera bounds preserve important relationships.
- Labels retain their correct anchors at all views.
- A flat reference carries the same essential information.
Sources & further reading
- W3C: Animation from Interactions
Explains the Level AAA web criterion for disabling nonessential motion initiated by interaction; it is not a certification for a video variant.