The 12 Principles of UI Animation

In 1981, Disney animators Frank Thomas and Ollie Johnston codified twelve principles of animation that made characters feel alive rather than mechanical. Seventy-five years later, these same principles determine whether a web interface feels polished and natural or cheap and jarring. The medium is different; the psychology is identical — human brains are wired to read motion as intent.

The Most Impactful Principles for UI

• Easing (Slow in, Slow out): Nothing in the physical world starts or stops instantaneously. Linear animations feel robotic. Every UI transition should decelerate as it arrives at its destination — cubic-bezier(0.22, 1, 0.36, 1) is the standard "ease-out" curve for entrances.
• Anticipation: Before an element moves dramatically, a small preparatory motion in the opposite direction signals what's about to happen. A button that slightly compresses before activating feels satisfying rather than abrupt.
• Staging: Important information should animate first. Secondary elements follow. Staggered entrance animations (each element 50–80ms after the previous) guide attention and reduce cognitive load compared to everything appearing simultaneously.
• Follow-through: When a modal closes, it should overshoot slightly and spring back — not cut to invisible. This communicates the momentum of dismissal.
• Squash and stretch: Subtle scale changes on hover (1.02×) or click (0.97×) give buttons physical presence. The element feels like it exists in the real world rather than painted on glass.

Duration: The Most Common Mistake

Most developers who learn about easing immediately make their animations too slow. A well-crafted UI transition should feel instantaneous while still being perceptible — typically 150–400ms. Micro-interactions (hover states, toggles, button presses) should be 100–200ms. Page transitions and modal entrances: 250–400ms. Anything over 500ms that isn't the centrepiece of a landing page hero feels like lag, not design.

Respecting User Preferences

Always implement @media (prefers-reduced-motion: reduce). Vestibular disorders affect 35% of adults over 40, and parallax effects, auto-playing carousels, and large-scale motion can trigger genuine physical symptoms. Wrap all non-essential animations in a reduced-motion check and provide a static fallback. This is both an accessibility requirement and, increasingly, a legal one in many jurisdictions.