Motion in interfaces serves a purpose beyond aesthetics. When done well, it communicates state changes, creates spatial continuity, and guides attention. When done poorly, it delays users.
Easing Is Everything
Linear motion feels robotic and unnatural. Real-world objects accelerate and decelerate. Use ease-in for elements leaving the screen, ease-out for elements entering, and ease-in-out for elements that transform in place.
Duration Should Match Distance
Small micro-interactions should complete in 100-200ms. Larger transitions should take 300-500ms. Never exceed 600ms for interface animations.
