I Built an Epic Staircase Page Transition in Next.js—Here’s the Code, the Z-Index Nightmare, and the A11Y Fix

The Goal: Achieving a seamless, staggered "staircase" page wipe when routing in a Next.js App Router project.

The Stack: Next.js, Framer Motion, Tailwind CSS, and Radix UI (for the Sheet).

Lesson Learned: It's not one animation, but many synchronized ones.

Key Concept: flex-row is essential. Explain that without it, the top: ["0%", "100%"] animation would just make vertical strips slide down within their small vertical space, not cover the screen.

Tip for Newbies: The reverseIndex function coupled with the delay prop is how you create staggered sequencing. Don't be afraid to use utility functions to manage your animation variables.

The Nightmare: My transition wasn't smooth; the new page flashed before the old one disappeared.

The Fix: Using AnimatePresence mode="wait" and precise time management.

Code Insight: Discussing the critical time synchronization:

    Total Stair Time (1.0s): The exit animation must be delayed by this amount.

    The Wrapper's exit: The motion.div holding the <Stairs/> must have an exit animation with a delay greater than 1.0s to ensure the high z-index overlay disappears after the animation is complete.

The Symptom: After implementing the transition, my fixed Header/Nav disappeared.

Lesson Learned: Page transitions often use fixed position and a high z-index (e.g., z-50). Any persistent UI element (like a Header) must have an even higher z-index (e.g., z-[60] or z-[99]).


Tip for Programmers: Always use a single, explicit, high z-index value for critical overlays and a slightly higher one for persistent UI. Avoid using many sequential z-index values (z-10, z-20, etc.) unless strictly necessary.

The Symptom: A console warning: "DialogContent requires a DialogTitle..." and a mobile nav that was too wide.

The Fixes:

    A11Y: Added <SheetTitle className="sr-only">Mobile Menu</SheetTitle> to satisfy screen reader requirements without visual clutter.

    UX: Changed the sheet width from w-full to w-[80vw] to leave a slight margin, improving the mobile user experience.

Brief summary of the main takeaways (Synchronization, Z-index, A11Y).