Methods

navigate

Navigate and transition to a URL. Pass an options object to configure how the page is loaded.

swup.navigate(url);

swup.navigate(url);

Disable animations for this visit:

swup.navigate(url, { animate: false });

swup.navigate(url, { animate: false });

Set a custom animation name:

swup.navigate(url, { animation: 'custom' });

swup.navigate(url, { animation: 'custom' });

Replace the current history entry instead of creating a new one:

swup.navigate(url, { history: 'replace' });

swup.navigate(url, { history: 'replace' });

Send a POST request with form data:

swup.navigate(url, { method: 'POST', data: new FormData() });

swup.navigate(url, { method: 'POST', data: new FormData() });

Disable the cache for this request:

swup.navigate(url, { cache: { read: false, write: true } });

swup.navigate(url, { cache: { read: false, write: true } });

Send along custom metadata available in all hooks:

swup.navigate(url, { meta: { lorem: 'ipsum' } })

swup.navigate(url, { meta: { lorem: 'ipsum' } })

destroy

Disables swup.

swup.destroy();

swup.destroy();

use/unuse

Enable and disable plugins.

// Enable plugin: accepts an instantiated instance
swup.use(new SwupScrollPlugin());

// Disable plugin: accepts either name or instance
swup.unuse('SwupScrollPlugin');

// Enable plugin: accepts an instantiated instance
swup.use(new SwupScrollPlugin());

// Disable plugin: accepts either name or instance
swup.unuse('SwupScrollPlugin');

findPlugin

Returns the plugin instance by that name, if enabled.

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

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

log

Does nothing by default, but outputs the passed content when the debug plugin is used. Accepts two arguments, the content of message and an optional log object which gets printed in a console group.

swup.log('Something happened', { lorem: 'ipsum' });

swup.log('Something happened', { lorem: 'ipsum' });