DEV Community

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

Posted on

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

#react #tutorial #css #nextjs

Introduction: Why Transitions Matter

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).
Enter fullscreen mode Exit fullscreen mode

Section 1: Challenge 1 — The Anatomy of the Staircase (Framer Motion)

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.
Enter fullscreen mode Exit fullscreen mode

Section 2: Challenge 2 — Orchestrating the Chaos (AnimatePresence & Timing)

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.
Enter fullscreen mode Exit fullscreen mode

Section 3: Challenge 3 — The Z-Index Nightmare (The Invisible Nav)

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.
Enter fullscreen mode Exit fullscreen mode

Section 4: Challenge 4 — Accessibility & Mobile UX

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.
Enter fullscreen mode Exit fullscreen mode

Conclusion

Brief summary of the main takeaways (Synchronization, Z-index, A11Y).
Enter fullscreen mode Exit fullscreen mode

Top comments (0)