Integrating Swup JavaScript with Wordpress Theme

Question

I'm running into a problem where I'm trying to use Swup for page transitions in a Wordpress site. I can get the content to fade-out, but it doesn't fade-in. Instead, it fades out and then the content of the next page just appears abruptly.

In my header I have:

<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script>
        const options = {
          linkSelector:
            'a[href^="' +
            window.location.origin +
            '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])'
        };
        const swup = new Swup();
</script>

In my document body, I include the class "transition-fade." And then in my stylesheet I have:

.transition-fade{
   opacity: 1;
   transition: 600ms;
}

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

In the console I get an error saying: "Uncaught TypeError: Cannot set property 'responseURL' of null at e (swup.min.js:1) at new e (swup.min.js:1) at (index):20"

Any insight into what might be going on here?

Thanks in advance.

Answer 1

Issue is that there is no selector defined where transition will happen.

First thing is that you should have tag inside body tag where you need transition to work.

<body>
<div id="swup">
{All content}
</div>
</body>

Then in options you need to define that particular tag like this

 const options = {
 containers: ["#swup"],
 linkSelector: ..

Thats it!

Integrating Swup JavaScript with Wordpress Theme

Question

1 answers

solution1
0 2020-06-03 21:53:43

Integrating Swup JavaScript with Wordpress Theme

Question

1 answers

solution1 0 2020-06-03 21:53:43

solution1
0 2020-06-03 21:53:43