Disney's 12 → the Interface

Change,
Explained.

Animation is how an interface explains change over time — when it's doing a job at all. Done well it orients, confirms and connects; done badly it distracts, or makes people ill. Toggle each to see what good motion does that bad motion doesn't.

01

Easing

Real objects speed up and slow down — they don't snap between speeds. Easing is what keeps an interface from feeling robotic.

linear
ease-out
spring
At rest
02

Timing

Duration sets the mood. Too fast and a change goes unnoticed; too slow and every interaction feels sticky.

~300ms · natural
03

Choreography

Related elements shouldn't all arrive at once. A small stagger turns a jarring pop into a guided, readable sequence.

All at once
04

Continuity

When one thing becomes another, animate the change instead of cutting to it. Growing a card into its detail view keeps the user oriented — no teleporting.

Card
Collapsed card
05

Feedback

Motion confirms that an action landed. A press that depresses and a result that springs in tell the user the system heard them.

Idle
06

Reduced Motion

Large sliding, scaling motion can trigger nausea and migraines. Honour the user's setting by replacing movement with a gentle fade.

Full motion