What is Slide Animation?

Slide Animations move elements into or out of view along an axis (left, right, up, down). Provides clear direction and spatial context. Common for drawers, mobile menus, sheets, carousels. Direction matters—slide from right for "next," from left for "back." Usually combined with fade for smooth appearance.

When Should You Use This?

Use slide for spatial transitions: drawers (slide from side), mobile sheets (slide up from bottom), page transitions (slide left/right for navigation), carousels, sidebars. Direction should match mental model: next/forward = left, back = right, more detail = up, dismiss = down. Combine with fade (fade + slide). Duration: 250-400ms. Use transform (translateX/Y) for performance.

Common Mistakes to Avoid

• •Wrong direction—slide should match navigation logic (forward = left, back = right)
• •Sliding wrong axis—mobile sheets slide up, not sideways; drawers slide horizontally
• •Too far—don't slide from 200% off-screen; 100% is enough
• •No fade—pure slides can feel abrupt; combine with fade for smoother appearance
• •Animating position—use transform: translateX(), not left/right (better performance)

Real-World Examples

• •Mobile drawer menus—slide in from left, slide out to left
• •iOS sheets—slide up from bottom for contextual actions
• •Carousel—slide left/right between items
• •Linear command palette—slides down from top