Slide Theme

A swup theme for in/out slide animations.

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

Installation

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

npm install @swup/slide-theme

npm install @swup/slide-theme

import SwupSlideTheme from '@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>

<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()]
});

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;
}

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