People rarely notice good animation, but they notice bad animation immediately — it feels slow, cheap, or strangely robotic, even when they can't say why. That reaction isn't just taste; it comes from how human perception works. Once you understand the psychology, you can design motion that feels right on purpose instead of by luck.

Why the brain pays so much attention to movement

The human visual system is tuned to notice motion before almost anything else. Movement at the edge of your vision pulls your eyes toward it before you consciously decide to look. That makes motion the most powerful attention tool on any screen, and also the most expensive one: every moving element competes with everything else for the same limited attention.

Two more facts about perception shape almost every motion decision:

People expect physics. Real objects speed up and slow down; they don't start and stop instantly. Motion that ignores this reads as mechanical.
People group things that move together. The Gestalt principle of common fate means elements moving in the same direction at the same time are seen as one group. You can use this to show relationships — or accidentally suggest ones that don't exist.

The five jobs motion does for people

Before animating anything, I ask which of these jobs it is doing. If the answer is none, it probably shouldn't move.

1. Directing attention

A subtle pulse on a new notification, or a form field that shakes on an error, tells people exactly where to look. Use it for one thing at a time. If three things move at once, none of them feel important.

2. Explaining change

When a card expands into a full page, animating the transition shows where the new content came from and how to get back. Without that continuity, people have to rebuild their mental map after every hard cut. This is why shared-element transitions feel so clear.

3. Confirming cause and effect

A button that responds the instant it is pressed feels trustworthy. Long-standing usability research puts the threshold for feeling instantaneous at about a tenth of a second; beyond that, people notice a delay. Feedback motion should start immediately, even if the actual result takes longer.

4. Expressing personality

A banking app and a game can share the same layout and feel completely different because of motion alone. Crisp, short, restrained timing reads as precise and serious. Springier, bouncier motion reads as friendly and playful. That is brand identity expressed through time.

5. Making waiting feel shorter

Occupied time feels shorter than empty time — a well-known finding from the psychology of waiting lines. Skeleton screens, progress indicators, and loaders that show something happening make waits feel shorter and, more importantly, reassure people that nothing is broken.

Easing — the biggest reason animation feels right or wrong

If you fix only one thing, fix easing. Easing describes how speed changes over the course of an animation.

Linear — constant speed. Looks robotic on moving objects, but fine for color fades or a spinning loader.
Ease-out (decelerate) — starts fast and settles gently. Best for elements entering the screen, because the response feels immediate.
Ease-in (accelerate) — starts slowly and leaves fast. Best for elements exiting, because they get out of the way.
Ease-in-out — slow, fast, slow. Best for things moving from one on-screen position to another.
Springs — physics-based motion defined by stiffness and damping rather than a fixed duration. Ideal for dragging, swiping, and anything people manipulate directly, because a spring can be interrupted and redirected naturally.

In After Effects, Easy Ease is a starting point, not a finish. The real work happens in the Graph Editor, shaping the speed curve so an object arrives with intent. In code, I use Framer Motion with deliberately chosen curves and springs rather than the defaults.

Timing — how long animations should last

There is no single correct duration, but these rules of thumb hold up well in interfaces:

Small feedback such as button presses and toggles: roughly 100–200 milliseconds.
Most interface transitions such as menus, modals, and cards: roughly 200–300 milliseconds.
Large or full-screen changes: up to about half a second.
Bigger distances and bigger elements need slightly longer; smaller screens usually want shorter.
The more often someone sees an animation, the shorter it should be. Anything triggered dozens of times a day should feel nearly instant.

Brand films and explainer videos follow different rules, because the viewer has chosen to watch. Inside a product, nobody chose to wait for your animation.

Disney's 12 principles, translated for screens

Disney animators Ollie Johnston and Frank Thomas described the 12 principles of animation in The Illusion of Life. They were written for character animation, but most translate directly to interfaces and motion graphics:

Slow in and slow out — this is easing. Almost nothing should move linearly.
Anticipation — a slight wind-up before a big action, like a button dipping before a panel launches. It prepares the eye.
Follow-through and overlapping action — parts don't stop at the same moment. Staggering list items by a few frames makes a group feel organic instead of stamped out.
Arcs — natural movement follows curves. An object travelling diagonally across the screen looks better on a gentle arc than on a ruler-straight line.
Staging — present one idea at a time so the viewer knows where to look.
Timing — the number of frames defines weight and mood. Heavy things move slowly; light things move quickly.
Squash and stretch — conveys weight and elasticity. Use it lightly in interfaces; a hint is enough.
Exaggeration — save it for brand moments, celebrations, and onboarding, not routine actions.
Appeal — the sum of the rest. Motion that is clear, consistent, and well-timed is appealing.

When motion backfires

Motion sickness. Large zooms, parallax, and spinning can trigger dizziness and nausea for people with vestibular disorders. Operating systems offer a reduce-motion setting, and websites can detect it. On this site, the pointer-driven fluid and smoke effects switch off when that setting is on, while the calm background stays. The WCAG accessibility guidelines cover this too: motion triggered by interaction should be possible to disable, and moving content that plays automatically for more than five seconds needs a way to pause it.
Flashing. Content should not flash more than three times in any one second, to avoid triggering seizures.
Waiting for decoration. If people must wait for an animation to finish before they can act, it is too long.
Inconsistency. If the same action animates differently in two places, people sense something is off even if they can't name it.

A quick motion audit checklist

Run this on any website, app, or video:

Can you name the job each animation does?
Does anything move linearly that should ease?
Are entering elements decelerating and exiting ones accelerating?
Do frequent interactions feel instant?
Is only one thing asking for attention at a time?
Does the same action always animate the same way?
Does the experience still work with reduced motion turned on?
Does the motion match the brand's personality?

Whether it's motion graphics and animation or the wider creative direction of a brand, this is the order I work in: the psychology comes first, the keyframes second.

Key takeaways

Motion captures attention before conscious thought, so spend it only where it helps.
Every animation should do a job: direct attention, explain change, confirm actions, express the brand, or ease waiting.
Easing matters more than anything else — decelerate in, accelerate out, springs for direct manipulation.
Keep product animations short, and the most frequent ones shortest.
Respect reduced-motion settings; good motion is optional motion.

Planning a project? Book a free discovery call — I'll tell you honestly what it needs.

The Psychology of Motion Design — Why Good Animation Feels Right