Timing and easing in user interface animations ensure that the animation feels natural and professional.
Basic easing functions:
- Linear: Constant speed, robotic feel (mostly avoid)
- Ease-in: Starts slow, accelerates (for exit animations)
- Ease-out: Starts fast, slows down (ideal for entrance animations)
- Ease-in-out: Starts slow, accelerates, then slows down (for transition animations)
Correct timing principles:
- Short animations (100-300ms): Button clicks, toggles
- Medium animations (300-500ms): Menu openings, modal windows
- Long animations (500-1000ms): Screen transitions, complex movements
Draw inspiration from Disney's 12 animation principles: use techniques like anticipation, squash & stretch to create realistic movement.
Good animation enhances the user experience but doesn't distract.