Motion art direction

Use motion to support hierarchy and storytelling. Give every animation a job: orient, reveal, connect, emphasize, acknowledge, or create atmosphere. Remove motion whose only rationale is that animation is possible.

Workflow

1. Audit the experience

Inspect the content hierarchy, interaction states, current animation code, device constraints, and page performance. Identify narrative beats and moments where motion would clarify state or direct attention. Read motion principles before designing a broad system.

When working inside an isolated design prototype, scope motion code and dependencies to that prototype. Let competing prototypes explore different motion languages; do not force them through shared production animation architecture before selection.

2. Define the motion language

Write a short specification covering character, timing, easing, spatial logic, sequence, scroll relationship, and reduced-motion behavior. Inventory each proposed animation with its trigger, purpose, properties, duration, interruption behavior, and reduced-motion replacement. Delete inventory rows with no defensible purpose.

Use micro interactions around 120–250ms, UI transitions around 200–450ms, and major transitions around 500–1000ms as starting ranges, not rigid rules.

Choose dominant directions, depth behavior, masks, scale, or parallax. Define leads, followers, overlap, stagger, and rest moments. Use one coherent vocabulary across text, images, section transitions, navigation, cursor behavior, and hover states. Contrast a few hero moments with stillness.