Swup Transition Test

🌀 Swup Integration Test Page

Testing Smooth Page Transitions

This page demonstrates our new Swup Jekyll integration with:

  • Persistent Hero - Video/image continues across pages
  • Fade Transitions - Smooth content transitions
  • Hero Text Animation - Typing effect on navigation
  • Component Re-initialization - Gallery, Swiper, etc.
  • Progress Bar - Loading indicator
  • Preloading - Faster navigation

Navigation Test

Use these links to test the smooth transitions:

What to Look For

  • Hero stays visible during transitions
  • Content fades smoothly
  • Progress bar shows at top
  • Hero text animates on arrival
  • No page reload/flash

🎭 Animation Details

The integration includes:

Hero Persistence

Hero media uses data-swup-persist="hero-media" to continue playing across pages.

Text Animations

Hero text animates with a typing effect using GSAP TextPlugin on each page transition.

Component Lifecycle

All components (Gallery, Swiper, Terminal, etc.) are properly re-initialized after each transition.