We design Framer Motion systems that support spatial continuity, hierarchy, and feedback—without delaying tasks, hiding content, or ignoring prefers-reduced-motion.
Interaction State Choreography Map
A purposeful path from rest through intent, transition, active state, completion, and exit or recovery—labeled by orientation, continuity, feedback, and hierarchy.
Orientation
Rest
Stable baseline where primary content is readable without motion.
Feedback
Intent
User signals action—hover, focus, press, or gesture start.
Continuity
Transition
Short, interruptible change that preserves spatial context.
Hierarchy
Active state
Modal, drawer, step, or expanded region becomes the focus target.
Feedback
Completion
Success or settled UI confirms the outcome without blocking recovery.
Continuity
Exit / recovery
Content remains reachable; focus returns; exit does not hide errors.
Textual equivalent: Rest leads to intent, then transition, active state, completion, and exit or recovery. Purpose labels mark orientation, continuity, feedback, and hierarchy. Meaning is available without JavaScript.
Illustrative motion systems—not a guaranteed delivery catalog.
Modals, drawers, and route transitions with interruptible motion and correct focus restore.
Reorder and expand patterns that preserve item identity without thrashing large trees.
Success and error motion that supports clear copy, status roles, and pausable dismiss behavior.
Inspect scenario-specific motion purpose, timing guidance, focus, interruption, and reduced-motion alternatives. Demonstration motion can be paused or compared in instant mode.
Inspect scenario-specific motion purpose, timing guidance, focus, interruption, and reduced-motion alternatives. Demonstration motion can be paused or compared in instant mode.
Demonstration state: idle · mode standard
Demonstration (non-essential enhancement)
Demonstration idle. Content below remains complete without playing motion.
Scenario
Open a focused task overlay without losing page context.
Map techniques to purpose. Not every interface needs animation.
Use: Most entrances, exits, and micro-feedback where layout can stay stable.
A11y: Large travel or continuous motion can cause discomfort; pair with reduced-motion paths.
Perf: Generally cheaper than layout properties when compositing layers are stable.
Misuse: Animating everything with opacity fades that delay reading primary content.
Use: Reorder, expand/collapse, and size changes where spatial continuity matters.
A11y: Unexpected layout shifts can disorient; announce meaningful structural changes.
Perf: Triggers measurement; costly on large trees or frequent updates.
Misuse: Applying layout animation to entire dashboards on every data tick.
Use: Modals, toasts, and conditional UI that should finish exit before unmount.
A11y: Exiting content must not become unreachable mid-task; keep focus valid.
Perf: Stale exit trees and listeners if cleanup is incomplete.
Misuse: Unmounting immediately so screen readers never hear the message.
Use: Persistent identity between a thumbnail and a detail surface.
A11y: Do not rely on the flight path to communicate meaning—labels must remain clear.
Perf: Shared layout across many nodes increases measurement work.
Misuse: Shared-layout morphs for unrelated elements that confuse hierarchy.
Use: Press, drag, and swipe affordances with equivalent keyboard paths.
A11y: Gesture-only controls exclude keyboard and some assistive tech users.
Perf: High-frequency pointer handlers can jank if they force layout each move.
Misuse: Swipe-only navigation with no buttons or shortcuts.
Use: Subtle progress cues where content remains readable without the effect.
A11y: Parallax dependence fails reduced-motion and can cause vestibular issues.
Perf: Scroll listeners and continuous style updates compete with main-thread work.
Misuse: Essential copy that only appears at a scroll position with motion.
Use: Indeterminate or determinate progress that users can pause or cancel when possible.
A11y: Progress must have a textual or accessible name—not motion alone.
Perf: Endless decorative loops waste battery and attention.
Misuse: Spinners that hide errors or never resolve.
Use: Highlighting what changed after an action when copy and structure also update.
A11y: Color or motion alone is insufficient; use text and ARIA appropriately.
Perf: Animating large result sets on every keystroke without deferral.
Misuse: Celebratory motion that obscures validation errors.
Contextual guidance—not one universal numeric preset or fabricated benchmark.
Tweens use explicit duration and easing—predictable for short UI feedback. Springs model stiffness, damping, and mass—useful when interruption and velocity continuity matter. Neither is universally better.
Shorter durations favor task completion. Longer motion must earn its keep by clarifying hierarchy—not by decorating idle screens.
Higher stiffness settles faster; higher damping reduces overshoot; mass affects how sluggish the response feels. Tune in context—do not ship one global numeric preset for every surface.
Slight overshoot can feel responsive for controls. Excess bounce on dense data views reduces readability and can feel playful when the product needs calm.
Users reverse direction mid-gesture. Prefer springs or interruptible tweens that inherit velocity instead of restarting from zero and stacking queues.
This page provides reduced and instant comparison modes in the lab. Motion must not be mandatory to understand content.
Detect and honor the preference immediately. Offer opacity/state changes instead of large spatial movement.
When motion is reduced, keep the same information architecture—swap panes, show/hide, and update labels without flight paths.
Do not require scroll-linked motion to reveal essential content or navigation.
Move focus into dialogs on open and restore to the trigger on close. Do not leave focus on nodes that exit-unmount.
Keep messages and controls available until exit completes, or provide an equivalent non-animated path.
Use polite live regions or focus moves for status that matters; do not announce decorative motion.
Demonstrations and auto-dismiss patterns should be pausable. Avoid auto-advancing content.
Every gesture-driven control needs a keyboard-operable alternative with visible focus.
Qualitative engineering boundaries—no invented FPS or millisecond guarantees.
These properties are usually cheaper to animate than width, height, top, or left on large trees.
Layout and shared-layout animations measure elements—scope them tightly.
Animated blur and heavy shadows can be expensive on mid-range devices—use sparingly.
Continuous scroll handlers that write styles every frame compete with input responsiveness.
Pause work when offscreen; remove listeners and exit trees when components unmount.
Keep Framer Motion inside intentional client islands—avoid global catalog imports on every route.
Profile on real devices before optimizing. Do not treat lab demos as performance guarantees.
Seven motion-specific steps from inventory to release governance.
List user tasks and mark which moments need orientation, continuity, feedback, or hierarchy—and which need none.
Define enter, active, exit, cancel, and error paths before choosing springs or tweens.
Sequence primary versus secondary motion so attention is not competed for by every element.
Design the reduced path and focus rules as first-class states, not afterthoughts.
Implement variants in bounded client islands with serializable configuration and clear ownership of business state.
Review mid-tier phones and reduced-motion OS settings; fix jank before adding more effects.
Guard critical flows with interaction tests and visual checks so motion regressions do not hide errors.
Patterns that undermine clarity, accessibility, or performance.
Motion that does not clarify hierarchy, continuity, or feedback becomes noise.
Competing motion destroys hierarchy and slows comprehension.
Users wait on decoration before they can complete tasks or dismiss overlays.
Content or focus disappears while exit animation runs.
Large spatial motion continues despite user preference.
Animating layout-heavy properties across large trees on every update.
Continuous motion without pause drains attention and battery.
Drag-only or swipe-only controls exclude keyboard users.
Mixed durations and bounce styles make the product feel accidental.
UI motion flags entangled with domain truth make recovery harder.
Focus remains on a node that exit-unmounted, trapping or losing the user.
Spinners and celebrations that obscure failure copy or empty states.
Motion quality depends on purpose, implementation, and device behavior. Framer Motion does not automatically provide accessibility or performance.
Treat motion as interaction design with accessibility and performance budgets—not as decoration applied after shipping UI.
No. Accessibility depends on focus management, semantics, reduced-motion alternatives, and testing—not on adding animation alone.
No. Motion should clarify orientation, continuity, feedback, or hierarchy. Many tasks are clearer with instant state changes.
No. Duration, stiffness, damping, and mass should be tuned to context. Profile on real devices rather than copying a single preset.
Ship motion that earns attention: purposeful, interruptible, reduced-motion aware, and profiled on real devices. Framer Motion is a tool—not an accessibility or performance guarantee.
I would like to discuss Framer Motion choreography, reduced-motion support, and interaction architecture for our product.
Begin stack consultation