What is Ease In Out?

Ease In Out is an animation timing function that starts slow, accelerates in the middle, then decelerates at the end. Creates natural-feeling motion—like how objects move in real life. Most common and versatile easing curve. Default for most UI animations. Feels smooth and professional.

When Should You Use This?

Use ease-in-out for most UI animations: modal entrances/exits, dropdowns, drawers, page transitions, hover effects. Duration: 200-400ms for small elements, 300-600ms for large. Too fast feels jarring, too slow feels laggy. Adjust curve for emotion: steeper curve = snappier, gentler curve = smoother. Use CSS ease-in-out or custom cubic-bezier.

Common Mistakes to Avoid

• •Using linear timing—looks robotic; always use easing for natural motion
• •Too slow—>600ms animations feel sluggish; keep under 400ms for UI
• •Easing everything—immediate feedback (clicks, hovers) can use linear or ease-out
• •Same timing for all sizes—large elements need longer durations than small ones
• •Ignoring reduced-motion—respect prefers-reduced-motion for accessibility

Real-World Examples

• •Linear—smooth modal animations with ease-in-out, 300ms duration
• •Stripe—card hover effects use ease-in-out for smooth transitions
• •Notion—page slide transitions with gentle ease-in-out curve
• •iOS—default animation curve for most system animations