Methods

loadPage

Navigates to a route with the animations and all… (can be used to submit forms).

swup.loadPage({
  url: '/someRoute', // route of request (defaults to current url)
  method: 'GET', // method of request (defaults to "GET")
  data: data, // data passed into XMLHttpRequest send method
  customTransition: '' // name of your transition used for adding custom class to html element and choosing custom animation in swupjs (as setting data-swup-transition attribute on link)
});

Note: loadPage function is used to submit forms with swup. For more information on submitting forms with XMLHttpRequest, refer to Sending forms through JavaScript.

preloadPage

Added to swup instance by preload plugin. Preload a page and saves it into cache.

swup.preloadPage('/page-url');

preloadPages

Added to swup instance by preload plugin. Finds all links in a page with data-swup-preload attribute and preloads pages they link to.

swup.preloadPages();

scrollTo

Added to swup instance by scroll plugin. Smoothly scrolls to required position. Accepts amount in pixels element you want to scroll to.

swup.scrollTo(document.body, 2000);

on/off

Un/registers a handler for swup event.

const handler = event => console.log(event)

// register event handler
swup.on('clickLink', handler);

// unregister event handler
swup.off('clickLink', handler);

// unregister all handlers for given event
swup.off('clickLink');

// unregister all handlers for all events
swup.off();

destroy

Disables swup.

swup.destroy();

use

Enables plugin.

swup.use(new SwupScrollPlugin());

unuse

Disables plugin. Accepts plugin name or instance.

swup.unuse('ScrollPlugin');

findPlugin

Returns plugin instance with a given name of a plugin.

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

getAnimationPromises

Returns array of promises for the animated elements (each promise gets resolved when animation of an element is finished). This method can be modified to return array of other promises swup should wait for before proceeding in page transition.

const arrayOfPromises = swup.getAnimationPromises();

getPageData

Gets response object received from server. Returns page data that are store by swup in cache. This method can be modified to accept other types of response from server, but must always return at least the fields below.

const json = {
    title: 'Page title',    
    pageClass: 'body-class',
    originalContent: 'html content of page',
    blocks: ['<div id="swup"></div>'], 
    responseURL: '/redirected-url'
};

triggerEvent

Triggers swup event. Accepts two arguments - eventName and optional eventObject.

log

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