design-motion-sequencing

name	design-motion-sequencing
description	Design motion as comprehension order rather than decoration. Use when adding or revising web animation, interaction timing, section-to-section scroll cues, hero-to-next-section handoffs, reveal sequences, or reduced-motion/JavaScript-off behavior.

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.