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