Smooth Page Transitions with Swup and GSAP

Introduction to Page Transitions

Modern websites aim to deliver app-like experiences with smooth transitions between pages. Traditional page reloads break continuity and feel outdated. Libraries like Swup allow you to create seamless navigation experiences without full reloads.

When combined with GSAP, Swup enables highly controlled, performant animations that enhance user experience without compromising speed.

How Swup Works

Swup intercepts link clicks, fetches the new page via AJAX, and replaces the content inside a specified container. This allows you to animate transitions between old and new content.

      const swup = new Swup({
  containers: ['#swup'],
  animateHistoryBrowsing: true
});
    

Setting Up the Transition Container

Wrap your page content inside a container that Swup will replace during navigation.

      <div id="swup">
  <main>
    <!-- page content -->
  </main>
</div>
    

Integrating GSAP Animations

GSAP allows you to animate elements during page transitions. You can hook into Swup lifecycle events to trigger animations.

      swup.hooks.on('visit:start', () => {
  gsap.to('#swup', {
    opacity: 0,
    y: 40,
    duration: 0.4
  });
});
    

      swup.hooks.on('content:replace', () => {
  gsap.from('#swup', {
    opacity: 0,
    y: 40,
    duration: 0.5
  });
});
    

Creating Overlay Transitions

A popular technique is using a full-screen overlay that animates in and out during navigation. This creates a smooth, cinematic transition experience.

      gsap.to('.transition-layer', {
  x: '0%',
  duration: 0.9,
  ease: 'power3.inOut'
});
    

Handling Navigation Links

Ensure only internal links are handled by Swup to avoid conflicts with external navigation.

      linkSelector: "a[href^="/"]:not([target="_blank"])
    

Reinitializing Scripts After Navigation

Since Swup replaces page content dynamically, you must reinitialize animations and scripts after each transition.

      swup.hooks.on('content:replace', () => {
  window.craffcodesReinitAnimations?.();
});
    

Performance Considerations

Keep animations lightweight and avoid heavy DOM manipulations. Use transform and opacity properties to ensure smooth performance.

Common Pitfalls

Avoid double initialization of Swup, ensure correct container selection, and prevent duplicate event listeners which can cause glitches.

Conclusion

Swup combined with GSAP enables smooth, app-like navigation experiences on the web. By properly managing lifecycle hooks, animations, and performance, you can create seamless transitions that elevate user experience.