Motion Design Principles Explained
Good motion design principles answer one question before any keyframe is set: why is this moving? Motion that has a reason—directing the eye, explaining a change, giving feedback—feels effortless and right. Motion without one feels gratuitous and slows everyone down. This guide covers the nine principles that make animation, whether for UI, brand, or explainer work, feel natural and purposeful.
These build on the static foundations in our guide to design principles, adding the dimension of time. Motion is the only design medium that unfolds—the viewer experiences it as a sequence, not a glance—which means the designer controls not just what is shown but when and how fast. That power is easy to overuse. The principles below are as much about knowing when to hold still as about how to move well.
1. Purpose first
Purpose is the master principle: every animation should do a job. In interfaces, motion typically explains a state change, provides feedback, guides attention, or smooths a transition so the user keeps their bearings. In brand and explainer work it directs the eye and paces a story. If you can’t name what a piece of motion accomplishes, it probably shouldn’t move. Decorative animation that serves no function quickly becomes noise that the audience learns to ignore—or worse, finds irritating.
2. Timing and spacing
Timing (how long a movement takes) and spacing (how the movement is distributed across that time) are the heart of motion. Most UI transitions land between roughly 200 and 500 milliseconds—fast enough to feel responsive, slow enough to be perceived. Too fast and the change is missed; too slow and the interface feels sluggish. Spacing controls whether motion feels mechanical or alive: objects that cover more distance in the middle than at the ends read as natural.
3. Easing
Easing is what makes motion feel physical rather than robotic. Real objects accelerate and decelerate; they don’t move at a constant speed. Ease-out (fast start, gentle stop) suits elements entering the screen; ease-in suits elements leaving; ease-in-out suits movement within the frame. Linear motion almost always feels wrong for natural movement. Choosing the right easing curve is often the difference between animation that feels cheap and animation that feels crafted. Custom curves give still more character—a slight overshoot on a spring, a sharper deceleration on a snappy toggle—and many design systems standardize a small set of named curves so motion stays consistent across a product. The key is that the curve, not just the duration, carries the feeling.
4. Anticipation and follow-through
Anticipation (a small wind-up before a main action) and follow-through (motion that continues and settles after) come straight from classical animation and make movement believable. A button that dips slightly before it springs, or a panel that overshoots and settles, reads as having weight and physics. Used subtly, these add life; overused, they make an interface feel bouncy and slow. The art is dialing them down to a hint in functional motion.
5. Hierarchy of motion
Motion hierarchy applies the same logic as visual hierarchy: not everything should move equally. Lead the eye by animating the most important element first or most prominently, and let secondary elements follow in a staggered sequence. Coordinated, staggered motion (a list cascading in) feels intentional and guides reading order, whereas everything moving at once is chaotic. Decide what the viewer should notice and let the choreography express that ranking.
6. Continuity and spatial logic
Continuity keeps the viewer oriented by treating elements as objects that persist and move through space rather than blinking in and out. Shared-element transitions—where a thumbnail expands into a full image, or a card morphs into a detail screen—maintain spatial logic so users understand where things came from and where they went. Respecting a consistent sense of space and direction prevents the disorientation that abrupt cuts and teleporting elements cause.
7. Restraint
Restraint is the principle most often missing. Motion is powerful precisely because it captures attention, which means too much of it exhausts the audience and competes with content. Reserve motion for moments that benefit, keep durations tight, and prefer subtle over flashy in functional contexts. A calm interface with a few well-placed transitions feels more premium than one where everything wiggles. When in doubt, animate less.
8. The 12 principles of animation
The classic 12 principles of animation—squash and stretch, anticipation, staging, straight-ahead/pose-to-pose, follow-through and overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal—were codified by Disney animators and still underpin modern motion. They translate directly to UI and motion graphics: arcs make movement natural, staging directs attention, exaggeration adds clarity, and appeal makes motion feel designed. Treat them as the deep grammar beneath the principles above.
9. Accessibility and performance
Accessibility makes motion safe and inclusive. Respect the system “reduced motion” preference and provide a calmer alternative, avoid large flashing or strobing effects that can trigger discomfort or seizures, and never make essential information depend on motion alone. Performance matters too—animation should run smoothly at a high frame rate; janky, stuttering motion is worse than none. Good motion design includes everyone and never sacrifices usability for spectacle. Treat reduced-motion not as turning animation off but as offering a gentler version—cross-fades instead of large slides, instant changes instead of long transitions—so the experience stays coherent. The discipline of designing a calm fallback often improves the default motion too, because it forces you to separate the animations that communicate from the ones that merely decorate.
Motion principles: do and don’t
| Principle | Do | Don’t |
|---|---|---|
| Purpose | Give every animation a job | Animate for decoration alone |
| Timing | Keep UI motion ~200–500ms | Make transitions too slow or instant |
| Easing | Use ease-out for entrances | Move things at constant linear speed |
| Anticipation | Add a subtle wind-up and settle | Overshoot until it feels bouncy |
| Hierarchy | Stagger motion to lead the eye | Move everything at once |
| Continuity | Use shared-element transitions | Let elements teleport or blink |
| Restraint | Reserve motion for key moments | Animate every element constantly |
| Accessibility | Honor reduced-motion settings | Rely on motion for essential info |
Putting motion to work
These principles reinforce one another: purpose decides what should move, timing and easing make it feel natural, anticipation and the 12 principles give it life, hierarchy and continuity keep it legible, restraint keeps it from overwhelming, and accessibility keeps it safe. Motion is design with time added—the same hierarchy and clarity that govern static work, now choreographed. For applied techniques and tools, see our motion graphics guide, and compare how these ideas serve interfaces in our app design principles.
Frequently Asked Questions
What are the core motion design principles?
The core principles are purpose, timing and spacing, easing, anticipation and follow-through, motion hierarchy, continuity, restraint, the classic 12 principles of animation, and accessibility. Together they ensure motion feels natural and physical, guides attention, communicates state and meaning, and enhances an experience rather than merely decorating it.
What are the 12 principles of animation?
They are squash and stretch, anticipation, staging, straight-ahead and pose-to-pose, follow-through and overlapping action, slow in and slow out, arcs, secondary action, timing, exaggeration, solid drawing, and appeal. Codified by Disney animators, they remain the foundation of modern motion design and apply directly to UI animation and motion graphics.
How long should a UI animation be?
Most interface transitions work best between roughly 200 and 500 milliseconds. Faster than about 100ms and the change is missed; slower than 500ms and the interface starts to feel sluggish. The right duration depends on distance and importance—larger or more significant transitions can be a touch longer, micro-interactions shorter.
What is easing in motion design?
Easing describes how a movement accelerates and decelerates over its duration, mimicking real-world physics. Ease-out suits elements entering, ease-in suits those leaving, and ease-in-out suits movement within a frame. Linear (constant-speed) motion feels mechanical and unnatural, so choosing the right easing curve is key to motion that feels crafted.
Why is restraint important in motion design?
Motion captures attention by nature, so overusing it exhausts viewers, competes with content, and makes interfaces feel chaotic and slow. Restraint—reserving motion for moments that genuinely benefit, keeping durations tight, and favoring subtlety—makes the motion that remains more effective and the overall experience feel more premium and calm.
