Back to Dictionary
Page & View Transitions
●○○Ready to Use
Slide Transition
A view or component enters the screen by sliding linearly from an edge, providing spatial context about where the user is navigating to.
Live Demo
List
Map
What It Is
A view or component enters the screen by sliding linearly from an edge, providing spatial context about where the user is navigating to.
✓When to Use
- Mobile app screen navigation (pushing a new view)
- Carousels and image galleries
- Wizard steps in a form
✕When NOT to Use
- Flipping between unrelated top-level tabs (use Fade instead)
- Replacing small inline text
Configuration Tips
- 01Couple the slide with a subtle fade-in (opacity 0 to 1) to soften the edge
- 02Use a slightly bouncy spring to make the slide feel physical
You've Seen It In
iOS NavigationInstagramTypeform
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Transition between these two steps by sliding out to the left and sliding in from the right.
Code Example (Tailwind CSS)
export function SlideTransitionDemo() {}