Swup is an extensible and easy-to-use page transition library for server-side rendered websites. It handles the complete lifecycle of a page visit by intercepting link clicks, loading the new page in the background, replacing the content and transitioning between the old and the new page.

Its goal is to make adding transitions to a site as simple as possible, while providing lots of other quality-of-life improvements.

Features

• 🎯 Extremely easy to use, even for beginners
• ✨ Auto-detects CSS transitions for perfect timing
• 🔗 Updates URLs and preserves native browser history behavior
• 📦 Uses a cache to speed up subsequent page loads
• 💡 Offers events for hooking into the lifecycle
• 🔌 Has a powerful plugin system and many official and third-party plugins
• 🎨 Provides ready-to-go themes to get started quickly

Plugins

Swup's core is very small by design. All extended features can be added via plugins. Some examples:

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

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

Having trouble?

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

CLI

Like to make sure your site has no bugs? You can use swup's CI/CD integration for that, or use the official swup CLI to check your site manually.

Want to Contribute?

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

License

Swup is released under the MIT license.