Motion Review Workflow
Evidence-first workflow for reviewing product-layer motion without changing Layout policy.
GitHub에서 원문 보기 ↗새 탭Primary role: motion review procedure.
Repository Boundary
This workflow reviews declared product-layer motion. It does not review unrelated code, create feature requirements, or turn preferences into blockers. Shared accessibility and evidence gates take precedence; Layout source order, constraints, and scroll ownership remain authoritative for reusable patterns.
Reusable Method
Intake
Name the interaction, trigger, frequency, affected state, expected purpose, supported input modes, reduced-motion behavior, and verification surface. If the purpose or observable is absent, record an evidence gap before discussing polish.
Inspect
Review four boundaries in order:
- State and source continuity: the before/after states, DOM order, focus, and recoverability remain coherent.
- Interaction continuity: repeated input, interruption, reversal, cancellation, and rapid state changes do not jump or lock input.
- Accessibility: motion alternatives and input-capability assumptions match the actual user preference and interaction contract.
- Delivery evidence: rendered frames, performance traces, and real-device behavior support claims that source inspection cannot prove.
Finding Record
| Impact | Location | Observed behavior | Proposed change | Warrant | Evidence | Boundary |
|---|---|---|---|---|---|---|
| What fails for the task | file:line or rendered state |
Reproducible observation | Smallest corrective direction | Why the evidence supports it | Trace, recording, test, or source | What remains unproven |
Decision
blocked: a declared local contract, accessibility requirement, or required evidence gate fails.review_required: the decision depends on missing rendered, device, user, or performance evidence.approve_with_debt: behavior is acceptable for the declared scope and the remaining bounded debt has an owner and trigger.pass: all declared motion contracts and required evidence are satisfied.
Remediation Order
- Confirm the motion has a task or state purpose.
- Remove motion that has no necessary job.
- Reduce frequency, distance, scope, or affected elements.
- Preserve spatial, semantic, and focus relationships.
- Make repeated and interrupted state changes continuous.
- Measure the performance claim on the target surface.
- Provide an evidence-based alternative for relevant preferences and inputs.
- Tune product-specific character only after the contracts above pass.
Opinionated Guidance
Frequency, duration, easing, physicality, and cohesion can be useful review prompts. They remain context-dependent heuristics. “Feels right,” popularity, or a practitioner's preference is not a sufficient warrant for blocking a change.
Platform-Specific Guidance
CSS transitions, Web Animations, Motion/Framer Motion, pointer events, and component-library transform origins are implementation examples. A review may recommend one only after verifying browser support, current implementation constraints, and the behavior that must change.
Unsupported Absolutes
Do not automatically block ease-in, a particular scale value, motion longer than a fixed threshold, a keyboard-triggered transition, a non-transform property, or a particular stagger interval. Do not claim GPU execution, hardware acceleration, or accessibility from a property name or API choice alone.
Verification Contract
Exercise the actual interaction in its default, repeated, interrupted, reversed, and reduced-motion states. Record the exact environment and observable. Source review may establish declared code paths; rendered and human outcomes require corresponding evidence families.
Scroll Story Evidence
For scroll-driven stories, add boundary samples immediately before and after each scene transition, forward/reverse comparison, large jumps, direct middle entry, reload/history restoration, narrow and short viewports, long copy, and delayed font/image changes. Deliberately fail or delay a media request and verify stale completion cannot replace current presentation.
Record JavaScript update cost separately from animation-frame intervals: neither alone measures compositor frame delivery. Count idle updates to catch observer/decode feedback loops. Record media dimensions, bounded cache entries, and estimated decoded bytes separately from measured process/GPU memory. Set product-local budgets and keep real-device, touch, assistive-technology, and comfort outcomes not_run when unobserved.
The Scroll Story verification records the two worked implementations and the limits of the local run.
Source, License, And Attribution
- Upstream inspiration: review-animations/SKILL.md
- Snapshot:
220e8607c90b17337d210125777b7b695f26c221 - Upstream license: MIT, Copyright (c) 2026 Emil Kowalski.
- Reuse form: independent method rewrite; upstream prose, tables, code, examples, and distinctive ordering were not retained.
- Evidence boundary: this procedure adapts a review shape, not its categorical practitioner judgments.
IA Navigation
Parent: Motion. Next: Motion Practice Reference.