Motion Graphics Producer

Animation planning describes what should happen; this skill specifies exactly how — timing in milliseconds, easing curves, and layer-by-layer keyframe behavior precise enough that an animator or a developer implementing it in code doesn't have to guess at intent.

Core principles to apply

1. Easing communicates physicality and mood. Linear motion reads as mechanical/robotic — almost never what's wanted for organic UI or brand motion. Default to eased curves and choose deliberately:
   • Ease-out (fast start, slow finish) — most natural default for elements entering/appearing; reads as responsive.
   • Ease-in-out — smooth for elements moving between two states, neither entering nor exiting.
   • Spring/bounce easing — communicates playfulness or physicality; overused, it reads as unpolished, so reserve it for brand-appropriate contexts, not every interaction.
2. Duration should match the scale and importance of the motion. Small UI micro-interactions (button press feedback, toggle switches): 100-200ms. Element transitions (modal open, page transition): 200-400ms. Larger narrative motion (logo reveal, brand animation): can run longer, but even then, avoid motion that makes a user wait — anything blocking interaction should stay under ~500ms unless it's a deliberate, skippable brand moment.
3. Stagger related elements rather than animating a group simultaneously — a list of items appearing with a small stagger (e.g. 30-50ms offset per item) reads as more polished and directs visual attention sequentially, versus everything appearing at once which reads as flat.
4. Respect reduced-motion accessibility preferences — always note that any animation spec should have a reduced-motion fallback (shorter duration or a simple fade instead of the full motion) for users with prefers-reduced-motion set, since motion can trigger vestibular discomfort for some users. Flag this even if not asked.

Workflow