Design Motion Sequencing

Overview

Use motion to reveal information in the order users should understand it. Static composition must already communicate the same order. Motion may point, confirm, or pace; it may not rescue missing hierarchy or hidden content.

Workflow

1) Define the comprehension order

• Identify the 3–5 key elements users must notice.
• Assign a sequence and timing for each.
• For a cross-section handoff, include the outgoing promise, boundary bridge, directional cue, and incoming heading/preview in that order.

2) Choose 1–2 motion motifs

• Pick a minimal set of motion styles (e.g., fade+slide, scale+blur).
• Reuse motifs consistently across the page.

3) Limit motion to meaning

• Animate only what changes understanding: hero, proof, CTA, key comparison.
• Avoid unnecessary hover effects or infinite loops.

4) Contract every runtime state

• Preserve the user's verbatim motion/continuity request in motion.sourceRef.
• Bind every target to a manifest id and keep the static QA state settled.
• Define normal, prefers-reduced-motion: reduce, and JavaScript-disabled behavior before implementation.
• In reduced motion and JavaScript-off states, critical copy, controls, the section bridge, and incoming heading remain visible without waiting.

Cross-section directional cue

A small repeating cue is a narrow exception to the default "avoid infinite loops" rule. Allow it only when it communicates that content continues below.

• Use one cue per boundary, subordinate to the primary CTA.
• Prefer translateY(4px–8px) plus opacity around .7–1; do not scale, rotate, bounce, blur, or move layout boxes.
• Use a calm 1400–2200ms cycle and a smooth ease. The cue may repeat while visible, but it is a direction signal, not ambient decoration.
• If clickable, point to an existing same-document fragment. If not clickable, keep it aria-hidden and do not imply button affordance.
• Disable the animation under reduced motion and leave the cue in its settled visible state.
• Keep the section bridge and next heading structurally visible with no JS.

For an FV-to-next-section handoff, motion follows the composition:

hero promise / CTA → cross-section field → SCROLL cue → next eyebrow/title

Do not animate all four elements merely because they appear in the order. A single cue can express the transition while the bridge and next preview remain static.

Motion plan output

Return a parent-manifest-ready plan, not animation prose:

• sourceRef {path, quote}
• ordered manifest target ids
• one or two motifs with trigger, properties, duration, easing, iterations, and comprehension meaning
• visualQaState: settled
• reducedMotion {strategy: settled-static, contentVisibleWithoutJs: true}

When mockup-to-code owns the page, runtime proof remains motion-report/v1 from motion-check.mjs. If the standard runner fails after its bounded retries, stop retrying and produce one fallback report containing the attempted command/error plus equivalent normal, reduced-motion, and JavaScript-off measurements. Never call an unmeasured motion state complete.

Output expectations

• Provide motion rules and target elements.
• Ensure motion supports reading flow and focus.
• State why any infinite iteration is directional rather than decorative.
• State the settled/reduced/JavaScript-off result separately.

Resources

references/

• references/motion-ordering.md for sequencing rules and anti-average constraints.