Page Transitions

Smooth page transitions enhance the user experience with sophisticated animations between pages.

Features

• Elegant fade + slide transition with gradient background and backdrop blur
• Gold progress bar with smooth loading animation
• Loading spinner for requests taking longer than 500ms
• Scroll position preservation on browser back/forward
• Smart exclusions for cart, checkout, account, and external links
• Data attribute support (data-no-transition) to disable on specific links
• Accessibility — Reduced motion and high contrast mode support
• Responsive — Optimized for all device sizes

How It Works

1. Link Click — Overlay slides in with fade animation
2. Progress Bar — Gold progress bar begins loading
3. Content Fetch — New page fetched via AJAX
4. Spinner (if > 500ms) — Loading spinner appears
5. Content Update — Page content replaced
6. Overlay Exit — Overlay fades out, new content visible

Excluded Pages

These pages skip transitions automatically:

• /cart, /checkout, /account
• /challenge, /password, /admin
• File downloads (PDF, images, videos)

Disabling on Specific Links

<a href="/some-page" data-no-transition>No Transition</a>

Customization

Colors

:root {
  --page-transition-gold: #C9A961;
  --page-transition-duration: 0.6s;
  --page-transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Background Overlay

:root {
  --page-transition-overlay-bg: linear-gradient(
    135deg,
    rgba(26, 35, 50, 0.98) 0%,
    rgba(26, 35, 50, 0.95) 100%
  );
}

Accessibility

Users with prefers-reduced-motion enabled see instant transitions without animations. High contrast mode is supported with enhanced visibility. The overlay manages aria-hidden attributes properly.

Troubleshooting

Transitions not working: Check browser console for errors, verify all files are loaded, check for script conflicts.

Slow transitions: Check network speed, optimize page sizes, reduce images on pages.

Content not updating: Ensure #MainContent exists on all pages, verify HTML structure matches.