A swup theme for in/out slide animations
npm install @swup/slide-themeA 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.
``bash`
npm install @swup/slide-theme
`js`
import SwupSlideTheme from '@swup/slide-theme';
Or include the minified production file from a CDN:
`html`
To run this theme, include an instance in the swup options.
`javascript`
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:
`css``
body {
--swup-slide-theme-translate: 60px;
--swup-slide-theme-duration-fade: 0.3s;
--swup-slide-theme-duration-slide: 0.4s;
}