swup / slide-theme

A swup theme for slide and fade animations 🎨

Swup 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

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>

Usage

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

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

Options

mainElement

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

reversed

Reverses the transition direction. Defaults to false.

Customization

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

slide-theme's Issues

Targeting other element than default #swup

Using this option does not appear to be working

var swup = new Swup();
swup.usePlugin(SwupSlideTheme, {mainElement: '#another-element'}); 

Thanks, amazing amazing work

Change default side of slide

Hello ! It's possible to change the default side of slide ? Like in overlay theme (with direction: "to-right", for example)

That would be cool!

How to make "reversed" work?

Slide theme works but I can't make the reversed option work. Is this a correct syntax?

new SwupSlideTheme({ reversed: true});

p.s. it woks if I change it in SwupSlideTheme.js manually

Deprecated dependencies

What did you expect? 🧐

Upgraded to swup 4 from swup 3, using npm uninstall then npm install. Everything installs without errors or warnings with the exception of @swup/slide-theme

What actually happened? 😵‍💫

@swup/slide-theme installs the npm warnings (See 'Relevant log output).
macOS 13.6.4, node v20.11.0, npm 10.2.4

Swup and plugin versions 📝

[email protected]
@swup/[email protected]
@swup/[email protected]
@swup/[email protected]
@swup/[email protected]
@swup/[email protected]

What browsers are you seeing the problem on? 🧭

No response

Relevant log output 🤓

npm WARN deprecated @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead

URL to minimal reproduction 🔗

Unable to provide a minimal reproduction URL

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

add live demo please

its really hard to recognize what this this work for me please add a live demo for this so we see preview before installing, thank you