Motion & texture

Page / Route Transition

Q: How do I implement a Page / Route Transition?

Add route transitions: forward slides the new page in from the right (~250ms ease-out) while the old slides slightly left and fades; reverse on back. Sibling tab switches cross-fade only. After navigation, focus the new page h1. Cap duration under 300ms.

Enter/exit choreography on route change—direction carries hierarchy: forward in, back out.

Also known as route animation · screen transition · push pop animation

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Page / Route Transition".

Add route transitions: forward slides the new page in from the right (~250ms ease-out) while the old slides slightly left and fades; reverse on back. Sibling tab switches cross-fade only. After navigation, focus the new page h1. Cap duration under 300ms.

Anatomy:
- directional grammar: Deeper level pushes from the right; back exits to the right—keep the metaphor consistent.
- enter / exit pair: Old page leaves while the new one enters—half a transition looks stuck.
- shared element: The premium upgrade—see shared-element.

Preferred API / pattern: `Next.js template transitions / Framer AnimatePresence`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Same direction for forward and back
○Avoid: Push animation on peer tabs
○Avoid: Enter without exit
○Avoid: Transitions over 400ms
○Avoid: No focus management after SPA route change

In plain wordsHow people search for it

“the slide when I open a new screen and the slide back when I go back”“forward feels like pushing a page on from the right”“that little motion between pages in a mobile app”

AnatomyOpen for part names

directional grammar: Deeper level pushes from the right; back exits to the right—keep the metaphor consistent.
enter / exit pair: Old page leaves while the new one enters—half a transition looks stuck.
shared element: The premium upgrade—see shared-element.

How to write itOpen for stack patterns

Web (HTML/CSS)View Transitions API / router animation hooks

React + Tailwind + shadcn/uiNext.js template transitions / Framer AnimatePresence

SwiftUINavigationStack transitions

Ant Designcustom with React Router / config provider motion

Notes

Mobile muscle memory: stacks push and pop with direction as hierarchy. Flip forward and back and people get lost. Sibling tabs should not push—they are peers; cross-fade instead. Keep 150–300ms, ease-out in / ease-in out. Move focus to the new page’s main heading after the route changes.

Common mistakesHumans and models trip here

Same direction for forward and back: spatial metaphor breaks.
Push animation on peer tabs: implies hierarchy that isn’t there.
Enter without exit: new page slides over a frozen old page—looks stuck.
Transitions over 400ms: animation tax on every navigation.
No focus management after SPA route change: AT doesn’t notice the new page.

More failure symptoms on AI broke it.

Related patterns

Shared Element Transition / FLIPThe same visual morphs continuously between two screens so the space still feels continuous.Easing / Timing FunctionHow speed is distributed over an animation’s duration—what makes motion feel mechanical or natural.Bottom SheetA panel that rises from the bottom edge—common on mobile for actions and details.TabsA row of labels that swap mutually exclusive views in the same place.

Spotted a wrong name or missing pattern?

Message on X