I am trying just a simple project in which the pages have a transition using Swup (https://swup.js.org/getting-started/example), but I can't get it working.
If I click on the Link the URL is changing, but the Content stays the same, from subpage.html I can change to index.html, but there are no transitions in all cases.
<a href="/subpage.html">Other Page</a>
[Right URL but wrong Content][1]
This is all the HTML, CSS & JS:
<body>
<style>
.transition-fade{
transition: 0.5s;
opacity: 1;
}
.html.is-animating .transition-fade{
opacity: 0;
}
</style>
<div class="container">
<main id="swup" class="transition-fade">
<h1>homepage</h1>
<p>Lorem ipsum dolor sit amet.</p>
<a href="/subpage.html">Other Page</a>
</main>
</div>
<script src="/node_modules/swup/dist/swup.min.js"></script>
<script>
const swup = new Swup();
</script>
</body>
And this is the HTML on subpage.html:
<body>
<style>
.transition-fade{
transition: 0.5s;
opacity: 1;
}
.html.is-animating .transition-fade{
opacity: 0;
}
</style>
<div class="container">
<main id="swup" class="transition-fade">
<h1>Supage</h1>
<p>Lorem ipsum dolor sit amet.</p>
<a href="/index.html">Homepage</a>
</main>
</div>
</body>
Please help me, what am I doing wrong?
[1]: https://i.stack.imgur.com/dbq3E.png
You need the 2 scripts on every page that you want to have transitioned: