<br>

<p align="center">
  <img width="280" alt="swup" src="https://swup.js.org/assets/images/swup-logo.svg">
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/swup"><img src="https://img.shields.io/npm/v/swup.svg" alt="npm version"></a>
  <a href="https://bundlephobia.com/package/swup"><img src="https://img.shields.io/bundlephobia/minzip/swup?label=size" alt="Bundle size"></a>
  <a href="https://github.com/gmrchk/swup/blob/master/LICENSE"><img src="https://img.shields.io/github/license/gmrchk/swup.svg" alt="License"></a>
  <a href="https://www.npmjs.com/package/swup"><img src="https://img.shields.io/npm/dt/swup.svg" alt="npm downloads"></a>
  <a href="https://github.com/swup/swup/actions/workflows/e2e-tests.yml"><img src="https://img.shields.io/github/actions/workflow/status/swup/swup/e2e-tests.yml?branch=master&label=tests" alt="Test status"></a>
</p>

<br>

# Swup

Complete, flexible, extensible, and easy-to-use page transition library for your server-side rendered website.

[Features](#features) •
[Documentation](https://swup.js.org/getting-started) •
[Plugins](https://swup.js.org/plugins) •
[Themes](https://swup.js.org/themes) •
[Discussions](https://github.com/swup/swup/discussions)

## Overview

Swup is a library that helps you add page transitions to 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

- ✨ Auto-detects [CSS transitions](https://swup.js.org/getting-started/how-it-works) for perfect timing
- 🔗 Updates URLs and preserves native browser history behavior
- 📦 Uses a [cache](https://swup.js.org/api/cache) to speed up subsequent page loads
- 💡 Offers [events](https://swup.js.org/events) for hooking into the lifecycle
- 🔌 Has a powerful [plugin system](https://swup.js.org/plugins) and many official and third-party plugins
- 🎨 Provides ready-to-go [themes](https://swup.js.org/themes) to get started quickly

## Examples

<img src="https://user-images.githubusercontent.com/9338324/49190360-50125480-f372-11e8-89e9-d2fb091a2240.gif" width="100%">

Take a look at [Sites using swup](https://github.com/swup/swup/discussions/333) for more examples.

## Having trouble?

If you're having trouble implementing swup, check out the [Common Issues](https://swup.js.org/other/common-issues) section of the docs, look at [closed issues](https://github.com/gmrchk/swup/issues?q=is%3Aissue+is%3Aclosed) or create a [new discussion](https://github.com/swup/swup/discussions/new).

## Want to Contribute?

<a href="https://github.com/swup/swup/discussions/424">We're looking for maintainers!</a>   👀

Become a sponsor on [Open Collective](https://opencollective.com/swup) or support development through
[GitHub sponsors](https://github.com/sponsors/gmrchk).
