English for Motion Primitives UI

Motion-focused component libraries built on top of animation engines like Motion (formerly Framer Motion) have their own vocabulary, distinct from general CSS animation terms. Talking precisely about “orchestration” versus “easing,” or “layout animation” versus “gesture-driven motion,” helps designers and engineers agree on exactly what an interaction should feel like before anyone writes code. This guide covers the essential terms.

Key Vocabulary

Easing — the mathematical curve that describes how an animation’s speed changes over its duration, such as starting slow, speeding up, and settling gently at the end rather than moving at a constant rate. “Swap the default easing for something closer to easeOut — right now the modal feels mechanical because it moves at a constant speed.”

Orchestration — coordinating multiple animations to run in a specific sequence or with staggered timing, rather than having every element animate simultaneously and independently. “We need orchestration here — right now every list item fades in at once instead of cascading one after another.”

Stagger — a specific orchestration technique where a group of elements animate with a small, incremental delay between each one, creating a cascading effect. “Add a stagger to the card grid so items appear in sequence instead of all popping in together.”

Layout animation — automatically animating an element’s size or position when its layout changes, such as when content is added, removed, or reordered, without manually calculating the before-and-after values. “Layout animation handles the reflow smoothly when a card expands — we don’t have to hand-code the height transition ourselves.”

Gesture-driven motion — animations that respond directly to user input like dragging, hovering, or pressing, rather than running automatically on a timer. “The card’s tilt effect is gesture-driven motion — it tracks the pointer position in real time instead of playing a fixed animation.”

Spring physics — an animation model based on simulated physical spring behavior (mass, stiffness, damping) rather than a fixed duration and easing curve, producing motion that feels more natural and responsive to interruption. “Switch this to spring physics instead of a duration-based tween — it’ll feel much better when a user interrupts the animation mid-way.”

Common Phrases

• “This transition needs orchestration — right now it’s just several animations happening to run at the same time.”
• “Try a stagger on the grid instead of animating every card identically.”
• “Let the library handle this with layout animation instead of manually calculating the transform.”
• “Is this gesture-driven, or does it just play automatically once the component mounts?”
• “Spring physics will feel more natural here than a fixed easing curve, especially since users can interrupt it.”

Example Sentences

Describing an interaction to a designer: “We can make the list items stagger in with a slight delay between each one, using spring physics so the motion feels a bit bouncy and natural rather than mechanically timed.”

Reviewing an animation implementation: “This looks good, but the modal’s exit animation isn’t using layout animation, so it just disappears instantly instead of smoothly collapsing back into the trigger button. Can we add that in?”

Explaining a UX decision to a product manager: “We chose gesture-driven motion for the card interactions so users get real-time visual feedback while dragging, rather than the card only reacting after they release it — it makes the interface feel more responsive.”

Professional Tips

• Use “orchestration” specifically when multiple elements need coordinated timing, and “easing” when describing a single animation’s speed curve — conflating the two makes design handoff conversations vaguer than necessary.
• Recommend spring physics explicitly when an animation needs to feel interruptible (like a draggable panel) — duration-based easing curves handle interruption poorly by comparison.
• Say “layout animation” when proposing that a library handle position and size transitions automatically, rather than describing it vaguely as “make it animate smoothly.”
• Distinguish gesture-driven motion from animations that simply trigger on mount or state change — it clarifies whether real-time input tracking is actually required.

Practice Exercise

1. Explain, in two sentences, the difference between orchestration and easing.
2. Write a one-sentence design note requesting a staggered entrance animation for a card grid.
3. Describe why spring physics might be preferable to a fixed-duration animation for a draggable UI element.