https://github.com/swup/fade-theme
A swup theme for fade animations 🎨
https://github.com/swup/fade-theme
animation fade page-transitions swup theme
Last synced: about 1 year ago
JSON representation
A swup theme for fade animations 🎨
- Host: GitHub
- URL: https://github.com/swup/fade-theme
- Owner: swup
- License: mit
- Created: 2019-05-13T21:52:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-27T09:35:39.000Z (over 1 year ago)
- Last Synced: 2025-06-09T02:36:33.680Z (about 1 year ago)
- Topics: animation, fade, page-transitions, swup, theme
- Language: JavaScript
- Homepage: https://swup.js.org/themes/fade-theme
- Size: 712 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Swup Fade Theme
A [swup](https://swup.js.org) 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.
```bash
npm install @swup/fade-theme
```
```js
import SwupFadeTheme from '@swup/fade-theme';
```
Or include the minified production file from a CDN:
```html
```
## Usage
To run this theme, include an instance in the swup options.
```javascript
const swup = new Swup({
plugins: [new SwupFadeTheme()]
});
```
## Options
### mainElement
Changes the selector of the elements to fade in/out. Defaults to `#swup`.
## Customization
You can override the plugin's custom properties to fine-tweak the animation.
These are the defaults:
```css
body {
--swup-fade-theme-duration: .4s;
}
```