The Psychology of Motion in UI

You've seen it before. A modal slides in and something feels wrong. Not broken, just... off. Maybe it's too slow. Maybe it's too fast. Maybe it moves in a way that doesn't match the action. You can't pinpoint it, but your brain notices.

This is the uncanny valley of UI animation. And understanding why some animations feel right while others feel wrong is the foundation of everything else in motion design.

#TL;DR

• Our brains are wired to notice movement - it's an evolutionary survival mechanism
• Animation is communication - it tells users what's happening, where things are, and what they can do
• The uncanny valley exists in UI - animations that are almost right feel worse than no animation
• Physics matters - things should move like real objects (acceleration, deceleration, momentum)
• Context determines appropriateness - what works for a game doesn't work for a banking app
• When in doubt, don't animate - bad animation is worse than no animation

#Why We Notice Movement

Humans are motion-detection machines. It's not a choice. Your brain is constantly scanning for movement in your peripheral vision. This is evolution. In the wild, movement meant predator or prey. Noticing it fast meant survival.

This wiring doesn't turn off when you're using a computer. Every animation, every transition, every moving element triggers this ancient pattern-matching system. Your brain is asking: what moved? why? should I pay attention?

This is why animation is so powerful. It hijacks a system that's been optimized over millions of years.

But it's also why bad animation is so jarring. When something moves in an unexpected way, your brain flags it as wrong. Not consciously. You just feel uncomfortable.

#Animation as Communication

Animation isn't decoration. It's a language. Every movement communicates something:

Spatial relationships: When a modal slides in from the right, your brain understands it came from "somewhere" to the right. When you dismiss it, it should go back there. This creates a mental model of space in your interface.

import "./slide-panel.css";
import { Settings, X } from "lucide-react";
import { useState } from "react";
import { Button } from "../ui/button";

export function SpatialRelationshipDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <Button onClick={() => setIsOpen((prev) => !prev)}>
        <Settings className="size-4" />
        {isOpen ? "Close" : "Open"} Settings
      </Button>

      <div
        className={`panel ${isOpen ? "panel--open" : ""}`}
      >
        <div className="panel__header">
          <span>Settings</span>
          <Button onClick={() => setIsOpen(false)}>
            <X className="size-4" />
          </Button>
        </div>
        <div className="panel__content">
          {/* Settings content */}
        </div>
      </div>
    </div>
  );
}

import "./slide-panel.css";
import { Settings, X } from "lucide-react";
import { useState } from "react";
import { Button } from "../ui/button";

export function SpatialRelationshipDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="container">
      <Button onClick={() => setIsOpen((prev) => !prev)}>
        <Settings className="size-4" />
        {isOpen ? "Close" : "Open"} Settings
      </Button>

      <div
        className={`panel ${isOpen ? "panel--open" : ""}`}
      >
        <div className="panel__header">
          <span>Settings</span>
          <Button onClick={() => setIsOpen(false)}>
            <X className="size-4" />
          </Button>
        </div>
        <div className="panel__content">
          {/* Settings content */}
        </div>
      </div>
    </div>
  );
}

State changes: When a button shrinks slightly on press, it communicates "I received your input." When it bounces back, it communicates "action complete." No text needed.

Hierarchy and focus: When everything else dims and blurs while a modal appears, animation is saying "this is what matters now."

Continuity: When an item in a list expands into a detail view, the animation shows that they're the same thing. Without it, users have to work harder to understand the relationship.

import "./list-expansion.css";
import { useState, useRef } from "react";

function ListWithAnimation() {
  const [selected, setSelected] = useState<Item | null>(
    null,
  );
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="list-container">
      <div
        className={`view ${selected ? "view--hidden" : "view--visible"}`}
      >
        {items.map((item) => (
          <ListItem
            key={item.id}
            item={item}
            onSelect={setSelected}
          />
        ))}
      </div>

      <div
        className={`view ${selected ? "view--visible" : "view--hidden"}`}
      >
        {selected && (
          <DetailView
            item={selected}
            onBack={() => setSelected(null)}
          />
        )}
      </div>
    </div>
  );
}

import "./list-expansion.css";
import { useState, useRef } from "react";

function ListWithAnimation() {
  const [selected, setSelected] = useState<Item | null>(
    null,
  );
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} className="list-container">
      <div
        className={`view ${selected ? "view--hidden" : "view--visible"}`}
      >
        {items.map((item) => (
          <ListItem
            key={item.id}
            item={item}
            onSelect={setSelected}
          />
        ))}
      </div>

      <div
        className={`view ${selected ? "view--visible" : "view--hidden"}`}
      >
        {selected && (
          <DetailView
            item={selected}
            onBack={() => setSelected(null)}
          />
        )}
      </div>
    </div>
  );
}

#The Uncanny Valley

The uncanny valley was originally about robots and CGI humans. When something is clearly artificial, we accept it (think cartoon characters or stylized robots). When it's perfectly realistic, we accept it. But when it's almost realistic, when it mimics reality but gets the details slightly wrong, we're disturbed. It feels off in a way that triggers discomfort.

UI animation has its own uncanny valley. And it's one of the most important concepts to understand about motion design.

#Why It Happens

Your brain is constantly trying to predict the physical world. When you see something move, your ancient pattern-matching system expects it to follow certain laws:

• Objects accelerate and decelerate - nothing jumps from 0 to full speed
• Momentum matters - if something is moving fast and suddenly stops, your brain questions it
• Weight implies inertia - a heavy button shouldn't feel as zippy as a light one
• Distance takes time - moving 500 pixels should feel different from moving 10 pixels

When an animation violates these expectations just enough to be noticeable, but not so much that you accept it as "computer behavior," your brain flags it as wrong. This is the uncanny valley.

#The Three Zones

Think of it this way:

• A button that instantly changes color? Fine. Your brain accepts this as computer behavior. No issue.
• A button that smoothly animates with proper easing and spring physics? Great. Your brain believes it's following real-world physics.
• A button that animates linearly with a fixed speed? Uncomfortable. It looks like it's trying to be natural but is failing. Your brain knows something's wrong, even if it can't explain why.

Try hovering over the buttons below to feel the difference between each zone. Pay attention to how each one moves, or doesn't move:

import "./uncanny-valley.css";

export function UncannyValleyDemo() {
  return (
    <div className="demo-container">
      {/* Zone 1: No Animation */}
      <div className="zone">
        <p className="zone__label">
          Zone 1: No Animation (Accepted) ✓
        </p>
        <button className="btn btn--instant">
          Instant Change
        </button>
        <p className="zone__description">
          Your brain says: "It's a computer, things change
          instantly."
        </p>
      </div>

      {/* Zone 2: Uncanny Valley */}
      <div className="zone">
        <p className="zone__label">
          Zone 2: Linear Animation (Uncanny) ⚠️
        </p>
        <button className="btn btn--linear">
          Linear Motion
        </button>
        <p className="zone__description">
          Your brain says: "Something feels mechanical and
          wrong."
        </p>
      </div>

      {/* Zone 3: Just Right */}
      <div className="zone">
        <p className="zone__label">
          Zone 3: Spring Animation (Natural) ✓
        </p>
        <button className="btn btn--spring">
          Spring Motion
        </button>
        <p className="zone__description">
          Your brain says: "That feels right. Natural."
        </p>
      </div>
    </div>
  );
}

import "./uncanny-valley.css";

export function UncannyValleyDemo() {
  return (
    <div className="demo-container">
      {/* Zone 1: No Animation */}
      <div className="zone">
        <p className="zone__label">
          Zone 1: No Animation (Accepted) ✓
        </p>
        <button className="btn btn--instant">
          Instant Change
        </button>
        <p className="zone__description">
          Your brain says: "It's a computer, things change
          instantly."
        </p>
      </div>

      {/* Zone 2: Uncanny Valley */}
      <div className="zone">
        <p className="zone__label">
          Zone 2: Linear Animation (Uncanny) ⚠️
        </p>
        <button className="btn btn--linear">
          Linear Motion
        </button>
        <p className="zone__description">
          Your brain says: "Something feels mechanical and
          wrong."
        </p>
      </div>

      {/* Zone 3: Just Right */}
      <div className="zone">
        <p className="zone__label">
          Zone 3: Spring Animation (Natural) ✓
        </p>
        <button className="btn btn--spring">
          Spring Motion
        </button>
        <p className="zone__description">
          Your brain says: "That feels right. Natural."
        </p>
      </div>
    </div>
  );
}

#Why Linear Animation Feels Wrong

This is the classic example. A linear animation moves at a constant speed from start to end:

Linear motion:  [============================] Constant speed
Speed:           ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔

This never happens in the real world. When you lift something, you don't accelerate instantly to full speed. When you put it down, you don't stop instantly. Real motion looks like this:

Ease-out motion: [════════════════════     ] Accelerates, then decelerates
Speed:            ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▘▘▘▘▘
                 Fast at start, slowing down

Your brain evolved to understand the second pattern. When it sees the first pattern, it doesn't consciously think "that's linear." It just feels robotic and off.

#The Core Problem

The uncanny valley is worse than either extreme because:

1. No animation = Your brain has never expected natural motion, so there's no violation
2. Almost-natural animation = Your brain expects it to follow physics, but it doesn't quite, so it feels wrong
3. Perfectly natural animation = Your brain's expectations are met, so it feels right

This means: if you're going to animate, you must get it right. A bad animation is worse than no animation.

A perfectly instant button click? Users don't mind. A perfectly smooth, physics-based animation? Users love it. A button that tries to animate but moves linearly with the wrong timing? Users feel uncomfortable, even if they can't articulate why.

#Physics Make Things Feel Real

Real objects don't move linearly. They accelerate and decelerate. They have momentum. They overshoot and settle.

When you throw a ball, it doesn't move at constant speed. It accelerates as it leaves your hand, decelerates as gravity and air resistance act on it, and bounces when it lands.

Digital objects should behave the same way:

• Acceleration: Objects should ease out of rest. A panel opening should start slow and speed up.

• Deceleration: Objects should ease into their final position. A panel closing should slow down as it reaches its destination.

• Momentum: If you flick a list, it should continue moving and gradually slow down, not stop instantly.

• Overshoot: When something snaps into place, a slight overshoot and settle makes it feel physical.

/* Bad: Linear motion feels robotic */
.modal {
  transition: transform 300ms linear;
}

/* Good: Ease-out feels like natural deceleration */
.modal {
  transition: transform 300ms ease-out;
}

/* Better: Custom curve for personality */
.modal {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

import "./physics-comparison.css";
import { useState } from "react";

export function PhysicsComparisonDemo() {
  const [animate, setAnimate] = useState(false);

  return (
    <div className="demo">
      <button onClick={() => setAnimate(!animate)}>
        {animate ? "Reset" : "Animate"}
      </button>

      <div className="row">
        <span className="label">Linear</span>
        <div
          className={`box box--linear ${animate ? "box--moved" : ""}`}
        />
      </div>

      <div className="row">
        <span className="label">Ease-out</span>
        <div
          className={`box box--ease-out ${animate ? "box--moved" : ""}`}
        />
      </div>

      <div className="row">
        <span className="label">Spring</span>
        <div
          className={`box box--spring ${animate ? "box--moved" : ""}`}
        />
      </div>
    </div>
  );
}

import "./physics-comparison.css";
import { useState } from "react";

export function PhysicsComparisonDemo() {
  const [animate, setAnimate] = useState(false);

  return (
    <div className="demo">
      <button onClick={() => setAnimate(!animate)}>
        {animate ? "Reset" : "Animate"}
      </button>

      <div className="row">
        <span className="label">Linear</span>
        <div
          className={`box box--linear ${animate ? "box--moved" : ""}`}
        />
      </div>

      <div className="row">
        <span className="label">Ease-out</span>
        <div
          className={`box box--ease-out ${animate ? "box--moved" : ""}`}
        />
      </div>

      <div className="row">
        <span className="label">Spring</span>
        <div
          className={`box box--spring ${animate ? "box--moved" : ""}`}
        />
      </div>
    </div>
  );
}

#Context Matters

The "right" animation depends entirely on context:

Banking app: Users want to feel secure and in control. Animations should be subtle, quick, professional. A playful bounce on a "Transfer $10,000" button would feel wrong.

Gaming app: Users expect energy and personality. Playful bounces, particles, and elaborate transitions fit the context.

Productivity tool: Users want efficiency. Animations should be fast and purposeful. Anything that slows them down will frustrate.

Marketing site: First impressions matter. More elaborate animations can create wow moments. Users aren't trying to accomplish tasks, they're exploring.

const ANIMATION_TIMING = {
  banking: {
    duration: 150,
    easing: "ease-out",
  },
  gaming: {
    duration: 400,
    easing: "spring",
    bounce: 0.3,
  },
  productivity: {
    duration: 100,
    easing: "ease-out",
  },
  marketing: {
    duration: 600,
    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
  },
};

There's no universal "correct" animation. There's only what's correct for your users and your context.

#When NOT to Animate

Animation has costs:

1. Time: Every animation adds duration to an interaction
2. Cognitive load: Movement demands attention
3. Battery: Animations consume power, especially on mobile
4. Accessibility: Some users experience motion sickness
5. Development time: Good animation takes effort to implement correctly

Ask these questions before adding animation:

Does this animation communicate something? If it's purely decorative, reconsider.

Is the user trying to accomplish a task? If yes, keep animations short and purposeful. Don't make them wait for your fancy transition.

Will users see this repeatedly? An elaborate animation is delightful the first time. By the hundredth time, it's annoying.

Does this animation respect the user's preferences? Users who've enabled "reduce motion" are telling you something.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Is this animation covering up a performance problem? Loading spinners and skeleton screens are sometimes necessary. But if you're adding animation to distract from slow performance, fix the performance instead.

#Training Your Eye

Noticing good animation is a skill. Here's how to develop it:

Slow things down: Record your screen and play back at 0.25x speed. You'll see details you missed at normal speed.

Study the masters: Linear, Stripe, Vercel, Arc Browser, Raycast. These companies invest heavily in motion design. Notice what they do.

Question everything: When something feels good, ask why. When something feels off, ask why. Break it down.

Build and compare: Implement the same interaction with different timing, easing, and properties. Feel the difference.

#Conclusion

Animation that feels right isn't magic. It's physics, psychology, and context working together. Your brain evolved to notice movement and interpret it. Good animation works with this system. Bad animation fights against it.

Before you add any animation, ask: what is this communicating? Is it making the experience better or just different? Does it respect the user's time and preferences?

Start with no animation. Add it only when it serves a purpose. And when you do add it, make sure it follows the physics your brain expects. That's how animation goes from decorative to essential.