A swup theme for in/out slide animations.

Makes the content slide out to one direction, and slide in from the other.

Install the theme from npm and import it into your bundle.

npm install @swup/slide-theme

import SwupSlideTheme from '@swup/slide-theme';

Or include the minified production file from a CDN:

<script src="https://unpkg.com/@swup/slide-theme@2"></script>

To run this theme, include an instance in the swup options.

const swup = new Swup({
  plugins: [new SwupSlideTheme()]
});

Changes the selector of the elements to slide in/out. Defaults to #swup.

Reverses the transition direction. Defaults to false.

You can override the plugin's custom properties to fine-tweak the animation. These are the defaults:

body {
  --swup-slide-theme-translate: 60px;
  --swup-slide-theme-duration-fade: .3s;
  --swup-slide-theme-duration-slide: .4s;
}