Swup is not animating: dependency bundling

[DylanDevelops]

Swup is not working for me and I'm not sure why. I believe I have everything correct.

How I transition pages: (is having the ./ in the beginning fine with swup?)

<a href="./about">
    <img src="./Images/arrow.png" alt="Learn More">
</a>

How I have the ID for all the pages: (The button that transitions between pages is within this main tag but I don't know if that means anything)

<main id="swup" class="transition-fade">

The CSS:

.transition-fade {
    transition: 0.4s;
    opacity: 1;
}

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

If you guys need more info let me know but I think this is all that is needed to make stuff animate.

[daun]

Relative links like ./about are currently not supported. If you switch to absolute URLs like /about it should work.

[DylanDevelops]

Huh i just changed this and it's still not working. Any ideas?

it looks like this now for anything that goes to another page however its still not working

<a href="/about">
  <img src="./Images/arrow.png" alt="Learn More">
</a>

[daun]

To help you troubleshoot, please (a) post a link to a website with your current setup or (b, better) fork this sandbox template to see if you can reproduce it there.

[DylanDevelops]

Here is the link to my website. I have the swup stuff on every page: https://www.dylanravel.com

Ill fork my stuff in a little bit so you can see. just have to finish something.

[daun]

You need to bundle your dependencies and scripts. The JS on your site is unbundled JS, the browser doesn't know where to import dependencies from. Check out webpack, rollup, vite, or whatever is cool these days 🤠

[DylanDevelops]

Oh okay. I'm super new to web development so I just didn't know about that! Which bundling thing would you recommend for someone whos very new to web dev?

[daun]

Parcel is nice and easy to get started.

[DylanDevelops]

Would I follow this installation?
https://parceljs.org/getting-started/library/