How to animate page transition using Swup.js and "/" link attribute ?
Hello, I am using Swup.js for page transition animation for my website. However, I don't know why the "/" attribute for my links doesn't work. The /subpage.html attribute is used to animate the transition when clickedIt looks like "/" is not taken into account. In fact, the code is trying to reach the subpage.html but in the parent folder due to the "/", and not to animate the transition.
Problems
- However, the animation works well, but not the transition: I am still on my "index.html" and not switched in my subpage.html.
- In addition, when I open my index.html with a local live server from Visual Studio, the transition doesn't work and I get the error "Cannot GET /subpage.html".
What I've tried
- Follows the help from https://swup.js.org/common-issues, and https://github.com/swup/swup/issues/30, but none worked.
- Changed the options parameters for Swup() in my javascript. I added
let options = {LINK_SELECTOR: 'a',debugMode: true,};toconst swup = new Swup(options);to get rid of the "/" attribute for transition (just to know if I can get it work), but I did not succeed: animation AND trnasition did not appeared...
My code
For this example, the button is linked to index.html so there is no subpage.html, but the transition don't work either. The animation transition-fade works, but then the page index.html is no longer shown.
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
a{
text-decoration: none;
}
.container{
width: 80%;
margin: 0 auto;
}
nav {
background: rgb(255,0,0);
padding: .5em;
}
nav a{
font-weight: bold;
color: white;
}
main{
width: 80%;
margin: 5em auto;
}
main a{
display: inline-block;
background: red;
color: white;
padding: .8em;
margin-top: 2em;
}
/* Swup Animation */
.transition-fade {
transition: 0.4s;
opacity: 1;
}
html.is-animating .transition-fade {
opacity: 0;
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width-device-width, initial-scale=1.0"><meta http-equiv="X-UAV-Compatible" content="ie=edge"><title>SWUPE test</title><link rel="stylesheet" href="style.css"><script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script> </head><body><div class="container"><nav><a href="#">company</a></nav><main id="swup" class="transition-fade"><h1>Home page here</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi reprehenderit non corrupti quae quis facilis natus veniam quas quibusdam? Provident voluptates nemo excepturi corporis saepe obcaecati sapiente, quas culpa!</p><a href="/index.html">Go to other page</a></main></div><script>
const swup = new Swup();</script></body></html>Thanks !