#design#animation#UX

Animation principles for web UI

Disney's 12 principles applied to web UI. Two of them matter most: anticipation and follow-through.

Animation principles for web UI

Disney animators codified 12 animation principles in 1981. Most still apply to UI 45 years later.

Animation principles for web UI
Four states of any UI animation — most teams skip the middle two.

Two that matter most for web:

  • Anticipation — small reverse motion before the main one. A button compresses slightly before springing forward. Tells the user "something is about to happen".
  • Follow-through — motion continues briefly after the trigger ends. Card slides in, slightly overshoots, settles back. Adds weight and physicality.

Easing functions encode these:

  • cubic-bezier(0.4, 0, 0.2, 1) — Material's standard ease, adds anticipation
  • cubic-bezier(0.34, 1.56, 0.64, 1) — overshoot, adds follow-through

Linear easing is dead. Anything more than 300ms with linear feels broken.

Other articles
(01) The death of carousels — what replaced them Hero carousels with auto-rotating slides are 1% click-through. They're still on 60% of sites. Why and what to do. → (02) Liquid Glass on the web — is it worth copying the iOS 26 look Apple shipped Liquid Glass in iOS 26 and now everyone is porting it to web. Half of the attempts are old glassmorphism in a new wrapper. Here is what actually works. → (03) AI-generated images for ads — Midjourney, Sora, Flux A year of generative ads. Patterns that work and the visible AI smell that ruins campaigns. → (04) Designing onboarding that doesn't suck Most onboarding flows are tour bubbles wrapped around an empty UI. Three principles that actually drive activation. → (05) CSS Grid in 2026 — tricks no one teaches Grid is 7 years old. Most teams still use 5% of it. The other 95% saves you React components. →