swup swup Plugins
GitHub swup on GitHub

Plugins

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

See below for details on installing and enabling plugins.

Official plugins

Plugins extending swup's functionality, developed and maintained by the 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

Official integrations

Plugins or libraries connecting swup with other frameworks or services.

Plugin Integrates with
Astro Integration Astro.js
GA Plugin Google Analytics
Gia Plugin Gia frontend components
GTM Plugin Google Tag Manager
Livewire Plugin Laravel Livewire
Matomo Plugin Matomo analytics

Installing plugins

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());

Accessing plugin instances

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

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