Motion Design Delivery Plan

Problem

Motion handoffs often stall when designers describe a feel but engineers receive only ad-hoc curves: intent is unclear, easing is arbitrary, accessibility is missing, and the downstream toolchain is inconsistent. This skill turns motion design into a reviewable, implementable, handoff-ready motion spec instead of only inspiration.

How It Works

• Define intent: clarify what the animation communicates, such as fast feedback, focus guidance, or state confirmation.
• Select principles: choose two or three of Disney's 12 principles, such as slow in / slow out, anticipation, or follow through, rather than stacking every effect.
• Specify timing: output duration, easing, and delay, using references like 100-200ms for micro-interactions, 300-500ms for page transitions, and 200-300ms for modal expansion.
• Cover edge cases: check prefers-reduced-motion, GPU-friendly transform / opacity, interruption from a second tap, and keep long-list stagger around 400ms.
• Map to tools: target CSS, Tailwind, Framer Motion, GSAP, Lottie, or React Spring; prefer transitions for simple state changes and animation libraries for orchestrated sequences.

Fit And Limits

It fits UI motion, component feedback, page transitions, and motion review. It is not a complete production pipeline for brand systems or 3D character animation.