Swup

Docs & Examples

• swup
• swup-plugins

Source

• swup.js

useSwup

Default config options you can apply.

• containers - only .x-main and .x-header elements are used which you can extend
• plugins - plugin SwupCorePlugin which adds some default options and functionality

Tips

Transition Class

To apply transition effect on swup content, use the view-transition-main class, other classes can be defined in transitions.css

cache

Swup caches pages automatically for 1 minute. Be sure to clear the cache via useSwup.cache.clear() on each content update. This is done automatically with naja.js.

Swup Replace

When you need to replace element upon swup, be sure to use data-swup-replace attribute. Both elements need to be present on old page and the new page.

<meta data-swup-replace="twitter:card" name="twitter:card" content="summary_large_image">

No Swup

When you need to disable swup for a navigation use data-no-swup. The native View Transition API will be used if the browser supports it.

<a href="/link" data-no-swup></a>

Do you need Swup?

Does your project really need Swup? Do you have only single page with minimum navigation? Then consider removing it and the native View Transition API will be used if the browser supports it.