Why my transition page with Swup doesn't work?

I would like to use https://swup.js.org/getting-started for my page transition but after had following this youtube video :

-https://www.youtube.com/watch?v=eVwH3VL1EsA&feature=emb_logo.

My code is exactly the same that the video , but it doesn't work when i load my page , i don't understand why ..

Thank you for you help

const swup = new Swup();
import Swup from 'swup';
/*Swup Animation */ 

.transition-fade{
    opacity: 1;
    transition: 500ms;
    transform: translate(0);
    transform-origin: left;
}

html.is-animating .transition-fade{
    opacity: 0;
    transform: translateX(100%);
}

html.is-leaving .transition-fade{
    opacity: 0;
    transform: translateX(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-UA-Compatible" content="ie=edge">
    <script defer src="/node_modules/swup/dist/swup.min.js"></script>
    <script defer src="script.js"></script>
    <link href="styles.css" rel="stylesheet">
    <title>Home Page</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="Index.html" class="transition-fade">Home</a></li>
            <li><a href="pricing.html" class="transition-fade">Pricing</a></li>
            <li><a href="about.html" class="transition-fade">about</a></li>
        </ul>
    </nav>
    <main id="swup"  class="transition-fade">
        <h1>This is the Home page</h1>
    </main>
</body>
</html>