swup

Swup

Versatile and extensible page transition library for server-side rendered websites

Features • Documentation • Plugins • Themes • Discussions

Overview

Swup adds page transitions to server-side rendered websites. It manages the complete lifecycle of a page visit by intercepting link clicks, loading the new page in the background and smoothly transitioning between the old and new content.

Its goal is to make it effortless to add page transitions to a site, while providing lots of other quality-of-life improvements.

Features

• ✏️ Works out of the box with minimal markup
• ✨ Auto-detects CSS transitions for perfect timing
• 🔗 Updates URLs and preserves native browser history
• 🏓 Manages scroll position between pages and anchor jump links
• 🚀 Uses a cache to speed up subsequent page loads
• 📡 Offers hooks to customize and extend the page load lifecycle
• 🔌 Has a powerful plugin system and many official and third-party plugins
• 🎨 Provides ready-to-go themes to get started quickly

Plugins

Swup is small by design. Extended features can be added via plugins:

• Display a progress bar while loading
• Enable smooth scrolling between visits
• Update meta tags and stylesheets after page loads
• Add support for preloading pages in the background
• Improve accessibility for screen readers
• Perform your animations in JS instead of CSS transitions
• Animate form submissions
• Get help in debug mode

Check out the list of all official plugins as well as third-party integrations.

Examples

Take a look at Sites using swup for more examples.

Having trouble?

If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.

Want to Contribute?

We're looking for maintainers!   👀

Become a sponsor on Open Collective or support development through GitHub sponsors.