Fade Theme

A swup theme for fade animations.

Makes the content fade out when leaving, and fade in when entering.

Installation

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

npm install @swup/fade-theme

npm install @swup/fade-theme

import SwupFadeTheme from '@swup/fade-theme';

import SwupFadeTheme from '@swup/fade-theme';

Or include the minified production file from a CDN:

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

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

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

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

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

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

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

body {
  --swup-fade-theme-duration: .4s;
}

body {
  --swup-fade-theme-duration: .4s;
}