The short version
- Good motion design rests on five principles: give every movement a purpose, time it well, ease it, order it by importance and use as little as possible.
- Small interface movements usually feel right between about 150 and 300 milliseconds, while larger moves and entrances need longer.
- Things entering should decelerate, things leaving should accelerate, and continuous loops should move at a steady pace.
- When several elements move, the most important one should move first, and only one thing should lead at a time.
- A small motion system of three durations and two or three easing curves keeps a brand's movement consistent across every piece.
On this page
Motion design principles are the rules of thumb that make movement feel natural rather than random. Classic character animation has its famous twelve, set out by Disney animators Frank Thomas and Ollie Johnston in The Illusion of Life. For design work, such as posts, websites, logos and presentations, five do almost all the work: purpose, timing, easing, hierarchy and restraint. You can use them without ever opening an animation app.
Purpose: every movement should do a job
Motion is loud. Anything that moves pulls the eye, so moving something is a claim that it matters right now. Before you animate, name the job. If you can't, leave it still.
Motion with a job
- Draws the eye to the one thing to read first
- Shows where something came from or went
- Confirms an action: sent, saved, added
- Sets a mood with a slow background
Motion for its own sake
- Every element bouncing in on arrival
- Text that keeps moving while you read it
- Spinning logos and pulsing buttons
- Transitions that make you wait
Timing: how long motion should take
Duration is the principle most people get wrong, usually by going too slow on small things and too fast on big ones. Two rules help. Small, frequent movements should be quick, because people see them all the time. Movements that travel further or change more should take longer, because the eye needs time to follow.
| Kind of motion | Typical duration | Why |
|---|---|---|
| Button and toggle feedback | About 100 to 200 ms | Feels instant, but still visible |
| Small interface changes, menus | About 200 to 300 ms | Quick enough not to delay anyone |
| Large panels, page changes | About 300 to 500 ms | More distance needs more time |
| Text entering a post or video | About 0.4 to 1 s | Long enough to register as an entrance |
| Background drift in a loop | Many seconds per cycle | Mood, not information: it should be barely noticed |
A useful test: if people notice the animation itself rather than what it shows, it is too slow or too big. If they miss the change entirely, it is too fast.
Easing: why nothing should move at constant speed
Real objects speed up and slow down. Motion at one constant speed, called linear, looks mechanical because nothing in the world moves like that. Easing curves add acceleration and deceleration, and choosing the right one is simple once you know three cases.
- Entering: ease out. Arrive fast and settle gently, like a car pulling up. Most entrances use this.
- Leaving: ease in. Start gently and speed away. Exits can also be shorter than entrances.
- Moving within the frame: ease in and out. Start and stop gently.
- Loops and rotations: linear. Continuous motion should keep a steady pace, or it will seem to hesitate at the join.
.panel-enter {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); /* ease out */
}
.panel-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1); /* ease in, and shorter */
}
.background-drift {
animation: drift 20s linear infinite; /* steady loop */
}Hierarchy: move the important thing first
Motion creates a reading order, just as size and weight do in a still design. Whatever moves first is read first. When several elements animate, stagger them in order of importance, with a short gap of around 50 to 150 milliseconds between each, and let only one element lead at a time. Visual hierarchy covers the still version of the same idea.
In an animated version of this story, the headline arrives first, then the date, then the details. The background keeps its own slow pace underneath.
- 1
The background settles
The field is already moving slowly when the post appears. It sets the mood without asking to be read.
- 2
The headline enters
One clear entrance, eased out, in under a second.
- 3
Supporting lines follow
The label and details arrive just after, in reading order, with a smaller movement.
- 4
Everything holds
The words stop and stay still long enough to be read. Only the background keeps moving.
Restraint: use less motion than you think
Stillness is what makes motion mean something. If everything moves, nothing stands out, and the design feels anxious. Pick one lead movement per piece, keep distances short, and let words stay still once they have arrived. Restraint is also about people: some viewers find motion uncomfortable or even sickening, so every piece should work with the motion turned off. Reduced motion explains how to plan for that.
Consistency: a small motion system
Brands keep colours and fonts consistent; motion deserves the same care. Write down a tiny system and reuse it: three durations, two or three easing curves and one house movement for backgrounds. It stops every new piece from inventing its own speed, and it makes your motion recognisable in the way motion for still brands describes.
:root {
--motion-quick: 150ms;
--motion-base: 250ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-quick: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
}
}Apply the same principles when you animate a logo, a post or a website hero. Animated logos and animated posts show them at work.
Questions people ask
What are the basic principles of motion design?
For design work, five cover most needs: give each movement a purpose, choose a sensible duration, use easing, order movement by importance and use as little motion as possible.
How long should an animation be?
Small interface feedback usually works at about 100 to 300 milliseconds, larger movements at about 300 to 500 milliseconds, and text entrances in posts or video at around half a second to a second.
Which easing should I use?
Ease out for things entering, ease in for things leaving, ease in and out for things moving within the frame, and linear for continuous loops.
What are the 12 principles of animation?
They are principles of character animation described by Disney animators Frank Thomas and Ollie Johnston in The Illusion of Life. Timing and easing, which they call slow in and slow out, carry over most directly to design motion.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
