@swup/overlay-theme

2.0.1 • Public • Published

Swup Overlay Theme

A swup theme for showing an overlay during animations.

Makes an overlay slide on top of the page until the new page is shown.

Installation

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

npm install @swup/overlay-theme
import SwupOverlayTheme from '@swup/overlay-theme';

Or include the minified production file from a CDN:

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

Usage

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

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

Options

direction

Changes the direction of the overlay animation. Defaults to to-right. Available values: to-right, to-left, to-bottom and to-top.

Default options

new SwupOverlayTheme({
  direction: 'to-right'
});

Customization

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

body {
  --swup-overlay-theme-color: #2D2E82;
  --swup-overlay-theme-duration: .6s;
  --swup-overlay-theme-delay: .2s;
  --swup-overlay-theme-scale: 1.2;
  --swup-overlay-theme-skew: 5deg;
}

To style the overlay directly, use the class name .swup-transition-overlay:

.swup-transition-overlay {
  background: linear-gradient(45deg, rgb(131,58,180), rgb(253,29,29), rgb(252,176,69));
}

Readme

Keywords

none

Package Sidebar

Install

npm i @swup/overlay-theme

Weekly Downloads

1,615

Version

2.0.1

License

MIT

Unpacked Size

38.6 kB

Total Files

11

Last publish

Collaborators

  • hirasso
  • daun
  • gmrchk