Motion Design Principles Every UI Engineer Should Know

Most UI animation is added as an afterthought. A fade here, a slide there. The result is a product that feels random — sometimes snappy, sometimes sluggish, never intentional.

The 4 Principles of Purposeful Motion

• Communicate state — animation should tell the user what changed and why
• Respect physics — objects should accelerate and decelerate naturally
• Be proportional — bigger changes warrant longer durations
• Never block — animation should never delay user interaction

Easing is Everything

Linear animation feels mechanical and wrong. Everything in the physical world accelerates and decelerates. Use ease-out for elements entering the screen (they decelerate to rest), ease-in for elements leaving (they accelerate away), and ease-in-out for elements moving within the screen.

"The best animation is the one users don't notice — they just feel that the product is alive."

Duration Guidelines

Small elements (icons, badges): 100–150ms. Medium elements (cards, panels): 200–300ms. Large elements (full-screen transitions): 400–500ms. Anything over 500ms feels slow unless it's a deliberate loading state.