Guidelines for creating smooth, purposeful animations that enhance the user experience.
Animation is not just decoration; it's functional. It helps users build mental models of how the interface works by showing continuity between states. Good animation guides the eye, hints at affordances, and makes the interface feel responsive and polished.
Test different animation properties to see how they affect the feel of an element appearing on screen.
Duration matters. Too fast is jarring; too slow is boring. 200-500ms is the sweet spot for UI transitions.
Objects in the real world don't start and stop instantly. Use easing (ease-out, ease-in-out) for natural movement.
Elements should morph or move to their new position, helping users track the change in context.
Use animation to reward users for key actions, adding a layer of emotional connection.
Stick to transforming opacity and transform properties to ensure 60fps rendering.
Respect the user's prefers-reduced-motion setting by disabling or simplifying animations.
Use a standard set of durations and easing curves across the application.