swup / swup

Versatile and extensible page transition library for server-rendered websites 🎉

swup 4 is released  🎉  Check out the release notes and upgrade guide.

Swup

Versatile and extensible page transition library for server-rendered websites.

Features • Demos • Plugins • Themes • Documentation • Discussions

Overview

Swup adds page transitions to server-rendered websites. It manages the complete page load lifecycle and smoothly animates between the current and next page. In addition, it offers many other quality-of-life improvements like caching, smart preloading, native browser history and enhanced accessibility.

Make your site feel like a snappy single-page app — without any of the complexity.

Features

• ✏️ Works out of the box with minimal markup
• ✨ Auto-detects CSS transitions & animations for perfect timing
• 🔗 Updates URLs and preserves native browser history
• 🏓 Manages the scroll position between pages and anchor links
• 🚀 Uses a cache to speed up subsequent page loads
• 📡 Offers hooks to customize and extend the page load lifecycle
• 🔌 Has a powerful plugin system and many official and third-party plugins
• 🎨 Provides ready-to-go themes to get started quickly

Demos

Explore our interactive demos to see swup in action.

Documentation

Visit our official documentation to learn more.

Plugins

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

• Display a progress bar while loading
• Enable smooth scrolling between visits
• Update meta tags and stylesheets after page loads
• Add support for preloading pages in the background
• Improve accessibility for screen readers
• Perform your animations in JS instead of CSS transitions
• Animate form submissions
• Get help in debug mode

Check out the list of official plugins and third-party integrations.

Themes

Get started quickly with one of three official themes: fade, slide, and overlay.

Examples

Take a look at the interactive demos and sites using swup for more examples.

Having trouble?

If you're having trouble implementing swup, check out the Common Issues section of the docs, look at closed issues or create a new discussion.

Want to Contribute?

We're looking for maintainers!   👀

Become a sponsor on Open Collective or support development through GitHub sponsors.

This project is tested with BrowserStack.

swup's Issues

Integrate with Wordpress

I have tried everything to get this in WP. Driving me crazy.
http://477c1d85.ngrok.io/

Manually update window.location when ajax request fails

Would you be open to adding an option or changing the default behavior of how Swup interacts with broken links (404, 500, etc.)? If I click on a link that results in a XHR error, Swup doesn't follow the link. I'd expect Swup to fall back to normal browser behavior, where clicking on a 404 link leads to a 404 page.

Would it be possible to set window.location to the new URL in cases where the XHR request fails?

Use API to scroll to specific anchor

Hi,

Is there a way to use the swup API to use the swup scroll functionality to scroll to anchors, without it being triggered by a link to that anchor? E.g. triggering the scroll with my own scripts or other actions.

Comparison to other PJAX libs

Where does this stand compared to Turbolinks, smoothstate.js or barba.js?
Just wondering (and at the same time, being amazed)

☀️

POST Request?

Is it possible to have animation on POST request?

For example after submitting, redirect to thank you page but seamlessly using swup.

Cache

Hi,
The cache is at the moment just in memory, correct?
How about persisting it into the localStorage?

Regarding chnages in content,
Probably it is enough to add a class which indicates the current state ,
Eg version–1 etc
On load just compare the version with the cache :)

Yarn Package missing /dist

When I add Swup through Yarn (yarn add swup), the package I get is missing the /dist folder. The folder tree I get is like:

swup
|- .idea
|- lib
|- plugins

And there is no swup.js present. Wierd one! Am I downloading the wrong package or is this an error?

Page Class Prefix and nav active classes not updating

Hi there,

Great plugin, the results are excellent. However, I can't seem to get my header to update nor am I getting the page name added in as a body class at all. The page and the rest of the content load without issue.

Any idea why?

<body>
    <div id="site-container" class="site-container">
        <div class="loading"></div>
        <header class="header" role="banner">
                <div class="header-logo">
                        <a href="/" aria-label="Homepage"></a>
                </div>
                <div class="global-nav-container">
                        <div class="global-nav js-global-nav">
                                <nav class="global-nav-links" data-swup="1">
                                    <a href="/" class="global-nav-link global-nav-link-home ">Home</a>
                                    <a href="/about.html" class="global-nav-link ">About</a>
                                    <a href="/contact.html" class="global-nav-link ">Contact</a>
                                </nav>
                        </div>
                </div>
        </header>
        <main class="main" rel="main">
                <div id="swup" data-swup="0">
                    ...
                </div>
        </main>
    </div>
    <script src="assets/js/swup.min.js"></script>
    <script>
        var swup = new Swup({ pageClassPrefix: 'page-' });
    </script>
</body>

Internet Explorer / Edge - not working

Love your plugin! Everything works fine so far in Chrome and Firefox. Still i got a big issue. If i open my page in Edge swup will not work. The page is stuck in "is-rendering is changing" most of the time.

I turned debug on. Hope you can help me.

Any solution? Am i missing something?

http://klug-bohren.sketch-lab.de/

Animating elements inside of the div that gets replaced

It looks like currently swup only supports waiting for animations to end before going to a new page if that element exists outside of the #swup div (the div where content gets replaced.)

What you need to do is after every page load, have swup rescan the DOM for any element that has the set animation class on it and get the timing again.

That way swup knows how long to wait until the end of an animation, even on elements that were added to the page by swup itself.

Possible to wait for images on page to be loaded?

Hi there, I'm noticing that the page is transitioning in and some images on the page are still being loaded — so we're getting kind of an ugly "snap" when they suddenly appear.

Would there be a way of waiting for those to load completely, or possibly using something like imagesLoaded in conjunction with Swup? I wasn't sure exactly how that should be implemented.

Clarifying question on installation

Hi,

Sorry, I'm a designer learning to code and I have really only previously used javascript libraries that I've imported into a project in the footer of a file.

I've decided to make a new Wordpress theme and use webpack for it so I can start getting the hang of things. But I'm very unfamiliar with some of the new way of doing things.

In the README you say to install just include this: import Swup from 'swup' const swup = new Swup()

But I'm not clear where I'm supposed to include it? Am I supposed to include it in my footer inside a script tag? Is it supposed to go in my app.js?

Oh... probably my app.js right? Is that right?

Also I know this is a bit old fashioned but it would be nice to be able to see a demo file or someone else's project that uses it so I know what it's supposed to do.

So far I think I'm supposed to import swup into my app.js file, and then I think..... not sure, that I just put the swup id on the content I want to swap out? What else? I see stuff about link selectors and stuff too. But not sure about what they are meant to look like.

Problem with double space in body class list

When double space is body class list split function return error: swup Failed to execute 'add' on 'DOMTokenList'. Just add simple replace to fix that: e.pageClass = e.pageClass.replace(/ +(?= )/g, '');

transitionEnd event bubble

transitionEnd event bubbles and end of transition of children element is detected even when it shouldn't.

Error - Failed to execute 'add' on 'DOMTokenList

I am getting an intermittent JavaScript error:

Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty.

Interestingly, it only happens when I click on a specific link (a main navigation link to home page) that has a trailing slash. I noticed that another link to the home page (main logo), doesn't have a trailing slash and that is fine. All other menu items do have trailing slashes btw.

Clearing the browser cache clears the error, all links work again (for a time). I'm unsure what triggers the error to start appearing but I don't want to deploy this before I have figured out the cause and fix.

Any ideas please?

Swup fails to work consistently on one page, only on the first load. Very odd.

We're developing a site at https://movecloser.wpengine.com. This tends to happen most often on mobile Safari, but basically, when clicking to the "Browse" page via the slide-out menu, a hard load is being triggered, rather than a page load via swup.

I thought that maybe I should preload that page (using data-swup-preload), but that doesn't seem to help either — even though the page is being preloaded correctly. It's rough to debug, because it only happens on the first load. You have to clear your cache every time to see it again. After that, swup kicks in normally and works fine.

Every other page loads fine via Swup, and I can't seem to find any particular JS errors that would be causing this issue. I'm open to any recommendations.

Event Listener & document load conflict

I have decided to reword this post because I noticed that my original post was very difficult to understand.

Issue: scripts don't work when swup loads a new page.

Initial Solution: Add an event handler as in the documentation of swup. Aas seen in Issue #2

Problem with this solution is that if I go directly to a page url, it doesn't load the script, this is an issue as I have sliders on my home page that were originally initializing form page load, but now it is waiting for an event handler, but it doesnt find one when the page is initially loaded.

I hope that clears up this strange question.

Swup fade in effect on initial site load

Hey guys is this possible?

Delay transitions or scroll before animations begin?

Hi there, I absolutely love Swup! Very easy to use, and everything seems to work great right out of the box.

The only thing I'm noticing is that the transitions I'm creating with CSS can look a little odd when used in conjunction with the page scroll. I've tried using the doScrollingRightAway: true setting assuming it would scroll, then start the animations, but it seems like the page loads so fast that it doesn't really change anything.

So, the question is: Is there a way to scroll to the top, then start all the animations?

I've also noticed that, even when not scrolling, occasionally the "out" transitions don't seem to have enough time to complete before the page loads. (I've got the cache disabled as well, because certain parts of the site are dynamic — not sure if that contributes to the issue or not.)

Thanks!

Before cache event / where to teardown event listeners?

Hello, I was wondering if there's a good event to hook into to achieve something similar to Turbolinks' before-cache event listener https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached. Or, if that doesn't already exist, would it make sense to add such an event, or achieve this in an alternate way?

Example use case:

$(document).on('swup:pageView', function() {
  var $image = $('#my-image');

  if ( $image.length ) {
    // Resize image when the browser size changes
    $(window).on('resize.myImageSizer', function() {
      $image.width( $(window).width() );
    });

    $(document).one('swup:beforeCache', function() {
      // Need to remove the event listener when the page is cached to avoid event stacking
      $(window).off('resize.myImageSizer');
    });
  }
});

Page scrolling to top on form submit

Hi,

I am just trying out swup forms, and am seeing some behaviour I would like to change if possible. I have added data-swup-form to a simple contact form. When submitted the page reloads through swup (fade-out,fade-in), and then scrolls to the top of the page. Would it be possible for the page to reload and stay at the location of the form, which now displays my success message?

This is the first bump I have hit with Swup, apart from this it is absolutely great 👍

Waiting for loading animation to complete.

Im implementing a page load state which consists of a overlay that slides over the content and then slides out to reveal the new content. Hoverver swup is not waiting for this animation to complete, so it's effectively not showing at all (Im working on a local environment so load times are almost instantaneous).

Even though the new page might be loaded before the loading animation shows or is complete, I still what the entire loading animation to play through.

This is my current loader css:

.c-load-screen {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: $orange;
    transform: translateX(-100%);
    transition: all 0.5s ease;
}

.is-changing .c-load-screen{
    transform: translateX(0);
}

Is there any way I can acheive this?

Create GA/GTM plugin

Plugins for Google Analytics and Google Tag Manager.

I cant get it working

I am a beginner at javascript, so I am probably doing something obviously wrong. I have tried trying to set up the swup on a simply test page but I still cant get it working. I would really like to get this one to work. Thanks in advance.

The test page im working with is: futsoc.co/page1.html

Here is my html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="assets/css/swup-settings.css">
</head>

<body>
<header>
	<nav>
 		<ul>
  			<li> <a href="page1.html">Page 1</a> </li>
  			<li> <a href="page2.html">Page 2</a> </li>
  			<li> <a href="page3.html">Page 3</a> </li>
		</ul>
	</nav>
</header>
<main id="swup">
	<h1 class="a-fade">Page 1</h1>
	<p>Ab aperiam architecto dolores ducimus ea fugit illo impedit in inventore iste laborum magni maxime, minima mollitia necessitatibus, nostrum officia pariatur praesentium qui quod repellat repudiandae tempore tenetur ut vel.</p>
	</main>
	<script src="assets/js/swup.js"></script> 
	<script src="assets/js/swup-settings.js"></script>
</body>

Here is my css:

.a-fade {
    transition: .4s;
    opacity: 1;
}
html.is-animating .a-fade{
    opacity: 0;
}

and here is my javascript:

let options = {
    LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]',
    FORM_SELECTOR: 'form[data-swup-form]',
    elements: [
        '#swup'
    ],
    animationSelector: '[class^="a-"]',
    cache: true,
    pageClassPrefix: '',
    scroll: true,
    debugMode: false,
    preload: true,
    support: true,
    disableIE: false,
    skipPopStateHandling: function(event){
        if (event.state && event.state.source == "swup") {
            return false;
        }
        return true;
    },
};
var swup = new Swup(options);

I've got it installed, but I don't have it transitioning or animating

Hi, sorry to bother again.

I've got swup installed on the wp theme I'm working, at least I believe so, as the I have placed the inside the container I want to change, ala <main id="swup"> page contents go here </main>, and that is resulting in 'data-swup=0' being added to <main> and swup-enabled being added to <html> which I believe is expected behavior.

I've also changed the default options link selector to be dynamic as per #4

And I've also added the class a-fade to all the sub-containers inside <main> that I want to fade out. on both my index.php page and my single.php page (the page that I want to transition to), and I've also added a-fade to my main.min.css file which is being loaded correctly.

But I do not see any animation between the two?

I'm sorry if this is a very basic issue, but I've looked through the documentation and I think I've done pretty much done what it says. Maybe there is something I'm missing though?

I'm also not entirely clear on how different the structures can be from page to page.

On my index.php page I've got
(the following is a pseudo code sketch of the structure)

<body>
   <main id="swup">
      <div class="content a-fade> 
      </div>
   </main>
</body>

And then on my single.php page I have

<body>
   <hero image> </hero image>
   <main id="swup">
      <div class="content a-fade> 
      </div>
   </main>
</body>

But does the swup box have to be exactly the same in structure as everything above it? How flexible is it?

And I think I understand the targeting of everything but I'm also not entirely sure. So swup targets the piece that is swapped out, while the classes "a-*" target how those sub parts are animated out? And the link selector settings in options tells swup how to target and find those classes correct?

Is there anything I'm missing?

Also if you need fuller context my updated repo can be found here for reference: https://github.com/jcklpe/JackalopePro

Any way to not scroll to top when using back/forward popstates?

As the title...

Just curious how to achieve this, as I'm trying to get as close to native browser behavior as possible on back/forward—and currently it always goes back to the top when going back or forward.

Keep up the good work, btw!

Animate element from one page to new position on target page

I'm just wondering how you'd recommend achieving this type of effect with swup (this example is coded with barba.js but I'd prefer to be using swup):
http://swup.grossdevelopment.net/

Would the 4 images on the index page need to exist outside of the page content container that SWUP replaces and thus remain in the DOM across all pages? Or is it best to detach them via JS, animate into new position (matching position of target page), and then destroy when the new page has loaded?

Another scenario could be to click a carousel slide on the homepage that animates into full-bleed hero image of the target page.

Also curious about this next/previous post example which slides the new page in while the old page animates out:
http://friendshop.com/work/family/

Thanks you!

pages revealed before transition completes

maybe I'm understanding the use case incorrectly, but should the css animation always complete before it reveals the new page?

for me, especially when the pages are cached, the css transitions are completely skipped.

great work btw, a pleasure to use so far

Swup stuck on 'is-changing'

I'm getting the following error after including swup in my project. Any idea what's going on?

swup.min.js:1 Uncaught (in promise) DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided must not be empty

Thanks much!

History back - Browser back buttons

Hi,
I can't find a way to fix this, whenever one of those two methods are used the js don't run again.
History.back() on the js or Browser back-next buttons.

Is there a way to rerun all the js or something like this?

Great work btw, I plan to use swup on all the new sites from now on.
Thanks!

Option to not skip animations when going back in history

The default swup behaviour is skipping animations when you go back in history.
I tried to animate the pages by assigning to options.skipPopStateHandling a function which always returns true (prevents the default behaviour) and loads the page by loadPage() so it does animate.
But this also creates a new entry in browser history and when you now try to go back it loads the same page over and over.
So the only way would be altering the Swup files.
Thank you for taking this into consideration

swupMergeHeadPlugin is stripping style tags also

Looks like when installing this plugin any style tags in head are not replaced on page load? Not sure if I am doing something wrong

Error with CommonJS module / Browserify install

Hey, I'm really excited to try this library — I've been using barba.js in all my projects for the last few years but this looks to be quite streamlined especially for use with CSS animations.

I'm having trouble installing this properly in my CommonJS module / browserify setup. Here's what I have:

var Swup = require( 'swup' );

var swup = new Swup({
	debugMode: true
});

That yields an uncaught type error:
Uncaught TypeError: Swup is not a constructor

When I console.log(Swup) I get the following:

{default: ƒ, __esModule: true}default: ƒ Swup(setOptions)arguments: (...)caller: (...)length: 1name: "Swup"prototype: {constructor: ƒ, enable: ƒ, destroy: ƒ, linkClickHandler: ƒ, linkMouseoverHandler: ƒ, …}__proto__: ƒ ()[[FunctionLocation]]: index.js:98[[Scopes]]: Scopes[3]__esModule: true__proto__: Object

Any ideas?

Thanks!

Browser back button malfunctioning.

I could be missing something, but I have the latest update and now the back button is no longer responsive on my site. With the 'debugMode' set to true, I can see that clicking the back button fires the events:

swup:popState
swup:animationSkipped
swup:pageRetrievedFromCache
swup:willReplaceContent
swup:contentReplaced
Removed 0 / added 1 tags in head
swup:pageView
swup:animationInDone

However there is no response from the browser. My guess is that I am running into some sort of a cache issue, where it is returning the current page as a cache object instead of the previous page. Any insight would be much appreciated.

is-rendering will not be removed

Hi, I found out, that the is-rendering class is not removed after the new page is loaded.

This seems to happen, when .is-leaving and .is-rendering are used in CSS.

Works perfect:
`.a-fade {
transition: .4s;
opacity: 1;
transform: scale(1, 1);
}

html.is-animating .a-fade{
opacity: 0;
transform: scale(0, 0);
}`

Does not work:
`.a-fade {
transition: .4s;
opacity: 1;
transform: scale(1, 1);
}

html.is-leaving .a-fade{
opacity: 0;
transform: scale(0, 0);
}

html.is-rendering .a-fade{
opacity: 2;
transform: scale(2, 2);
}`

Updating classes on elements outside of the #swup container

Is there a way to update classes on DOM elements outside of the #swup container based on the new page? For example to reset the active link in a header menu.

Thanks again!

stackblitz demo issue

error:

Error: Cannot read property 'innerText' of null
at Swup.module.exports [as getDataFromHtml] (getDataFromHtml.js:23)
at Swup.enable (index.js:248)
at new Swup (index.js:190)
at Object.execute (index.js:17)

https://stackblitz.com/edit/js-ly3dvt
what is the problem?

Scrolls to anchors are off by a px or so

It seems that if you scroll to anchors on a page it is positioned off by 1px or so (small line at the top)
It is noticeable if you e.g. have different sections with full viewport height backgrounds.

I reproduced with below sample on Chrome WIN, and Safari IOS.
Browser does position correctly on the anchor when swup is deactivated.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	html, body { padding:0; margin:0; }
	.a-fade { transition: .4s; opacity: 1; }
	html.is-animating .a-fade{ opacity: 0; }
	section {	min-height: 100vh;	}
	#first {  background-color:red; }
	#second {  background-color:blue; }
	#third {  background-color:green; }
	#fourth {  background-color:purple; }
	</style>
</head>
<body>
	<nav><a href="#first">one</a> <a href="#second">two</a> <a href="#third">three</a> <a href="#fourth">four</a></nav>
	<main id="swup">
		<div class="a-fade">
			<section id="first">1</section>
			<section id="second">2</section>
			<section id="third">3</section>
			<section id="fourth">4</section>
		</div>
	</main>
	<script src="/dist/swup.js"></script>
	<script>
		let options = {
			debugMode: true,
			cache:false,
			scroll:true
		}
		let swup = new Swup(options);
	</script>
</body>
</html>

proposal: LINK_EXCLUDE_SELECTOR

I have a proposal: adding LINK_EXCLUDE_SELECTOR option, with selector that if matched, will disable swup. Example: a[href^="mailto"], '.should-refresh' etc. I know one can add data-no-swup attribute, but It's not always possible.

is-leaving does not wait for transition to end

Hi,

The element correctly transitions in, but there is no transition out. I am using your regular example (markup and js).

Here's the css I'm using

.a-fade {
  transition: .8s;
  opacity: 1;
}

html.is-animating .a-fade {
  opacity: 0;
}

/* no luck here either*/
html.is-leaving .a-fade {
  opacity: 0;
}

I'm using the most recent build of Swup (1.0.2 reads the package.json).

Thanks for checking this out!

jQuery loading issue

I have a slider that is loaded with jquery that gets broken when transitioning between pages. Will I have to find a way to reload jquery as well as my scripts utilizing it under the provided event listeners?

Compatibility with CSS3 Animate It

Hi there,

I am using CSS3 Animate It (http://jackonthe.net/css3animateit/) in order animate some elements on the page if they get into viewport of the user.

Swup looks really interesting to me because of the smooth transitions and useful features. Therefore I want to use it :)

The problem
There's a problem with CSS3 Animate It and Swup together. After the transition to the next page the animations of CSS3AnimateIt are not loaded and played. One is not able to even see it, because it is not displayed.

What I tried
The animation is loaded and played after loading the page, if the user request it with his browser via URL. But it is not working anymore after transitions by swup. I think the reason is that there is no "real" page load anymore, and css3animatejs cannot detect that the page is loaded.

I tried to include css3animateit.js after the content has been replaced by swup. Unfortunately, it is not working. (From issue #2)

document.addEventListener('swup:contentReplaced', function () {
    document.writeln("<script type='text/javascript' src='css3animateit.js'></script>");
});

Hope you can help :)
Therefore I am writing to you all to ask how I may can fix that problem.

I really hope that you can tell me how to make both work together.

Thank you.

Have a nice day!

Does not update url when following redirects.

Hey, thanks for this great library. I'm facing this minor issue when the server returns a redirect, the content is shown correctly, but the url is not updated.
Can this be fixed or do I need to do something about it?

How to reload Javascript/Jquery after content replace

Hi All,

Could someone give us an example to how reload javascript code after content substitution?

I'm trying to use this fantstic script with Wordpress and it works properly but, if I have some javascript inside the content replaced, it not works anymore.

I cannot understand how to implement this code below properly

// load scripts for replaced elements
document.addEventListener('swup:contentReplaced', event => {
    swup.options.elements.forEach((selector) => {
        // load scripts for all elements with 'selector'
    })
});

---

An example of code I want to reload

<script type="text/javascript"> // HOME
(function( $ ) {
$(function() {

document.addEventListener('swup:contentReplaced', function () {
        // ----------------------------------------
        // Particle
        // ----------------------------------------

        function Particle( x, y, radius ) {
            this.init( x, y, radius );
        }

        Particle.prototype = {

            init: function( x, y, radius ) {

                this.alive = true;

etc.....

Thanks!

Error on initial page load

I am getting a

• Uncaught TypeError: Cannot read property 'addEventListener' of null
  from line 918 in swup.js
• element.addEventListener(type, listenerFn, useCapture);

I've simply added a div id="swup" and div class="a-fade" and init with var swup = new Swup() as shown in the demo to test this on my site.

What am I missing?

swup with vue.js

Do you have any tips on how to implement swup with vue.js ?

vue.js
https://vuejs.org/

Great work !

Defaults options and LINK_SELECTOR querySelector

Hi,

I'm playing with your lib for a Wordpress custom theme, really liking it so far!

Therefore, I had a couple of issues with my initial setup.

First thing, Wordpress will always output the full http:// URL by default (which is a good SEO practice also). Your default LINK_SELECTOR selector is targeting only relative link.

By default, the LINK_SELECTOR could check if URL is for current origin :

const domain = window.location.origin

const swup = new Swup({
    LINK_SELECTOR: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
})

Also, the class selector except the element to starts with the className, this works too :

const swup = new Swup({
    animationSelector: '[class*="a-"]',
})

It might be a little bit too loose though, any class contain this string part would be selected. The default could be something more specific to the purpose like [class*="a-transition-"].

Anyhow, this just my two cents. If you agree with this, I could fork and send a pull request.

Thanks.

Including absolute internal links while excluding all external links

I know by default LINK_SELECTOR looks for relative links with href attributes that start with a "/", but many CMS automatically inject the full URL even when linking to a page internal to the app.

Is there an easy way to compare current host to link target to exclude all external URLs but allow internal URLs even when they are absolute?

merge html > head

Hi,
it is possible to change html head tags? Lib change only title? What if I need to load another script or style on view change? Or need to change some meta description, og (opengraph) tags etc..

Delay out transitions until new content is ready

Firstly I am loving swup, easy to set up and use it is a great library.

For the project I am currently working on I am trying to get a certain behaviour on transition.

Using JS events I have a loading progress bar at the top which is working nicely.

What I am trying to achieve is on leaving the page I want to delay the out transitions until the new content is ready. Once it is ready, run and wait for the out transitions of the current content and then run transition in for the new content.

As a process it would be somehthing like:

1. Link Clicked
2. swup starts its background process (no transitions happen)
3. When new content is ready to be replaced - run outbound transitions
4. Run inbound transitions on new content

Hopefully that makes sense. Basically I am trying to avoid the user seeing a "blank page". Let me know if you need any more info or have any questions. Keep up the great work!

tldr: delay outbound transitions until new content is ready, then run normal out and in process.