Plugins

Swup is small by design. Extended features can be added via plugins.

Official plugins

These are plugins developed and maintained by the swup core team.

Plugin	Features
Accessibility Plugin	Enhance accessibility
Body Class Plugin	Update the body classname
Debug Plugin	Debug and get help in development
Forms Plugin	Submit forms with animations
Fragment Plugin	Dynamically replace containers based on rules
Head Plugin	Update the contents of the head tag
JS Plugin	Manage animations in JS
Parallel Plugin	Animate the previous and next page in parallel
Preload Plugin	Preload pages to speed up navigation
Progress Bar Plugin	Display a progress bar
Route Name Plugin	Named routes and route-based animations
Scripts Plugin	Re-evaluate scripts
Scroll Plugin	Smooth scrolling

These are plugins connecting swup with other frameworks or services.

Install and import the plugin via npm and your bundler:

npm install @swup/scroll-plugin

npm install @swup/scroll-plugin

import Swup from 'swup';
import SwupScrollPlugin from '@swup/scroll-plugin';

import Swup from 'swup';
import SwupScrollPlugin from '@swup/scroll-plugin';

Enable the plugin at initialisation of swup by including it in the options:

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

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

Alternatively, you can use swup's use & unuse methods to add or remove plugins after intialization.

const swup = new Swup();
swup.use(new SwupScrollPlugin());

const swup = new Swup();
swup.use(new SwupScrollPlugin());

Use swup's findPlugin method to find and manipulate plugin instances directly.

const pluginInstance = swup.findPlugin('SwupScrollPlugin');

const pluginInstance = swup.findPlugin('SwupScrollPlugin');