Example

Swup requires two things to work: a content container with an id and an animation class, as well as corresponding transition styles it can wait for when loading a page.

We'll tackle these one by one. See below for the complete code and an interactive demo.

1. Content container

Let's mark our main element as a content container by adding the id #swup.

We'll also add a special animation class to let swup know that we want to wait for this element to finish animating whenever a new page is loaded.

<main id="swup" class="transition-fade">
  <h1>Welcome</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</main>

<main id="swup" class="transition-fade">
  <h1>Welcome</h1>
  <p>Lorem ipsum dolor sit amet.</p>
</main>

2. Animation styles

Let's define a CSS transition on the special animation class added before:

/* Define a transition duration during page visits */
html.is-changing .transition-fade {
  transition: opacity 0.25s;
  opacity: 1;
}

/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
  opacity: 0;
}

/* Define a transition duration during page visits */
html.is-changing .transition-fade {
  transition: opacity 0.25s;
  opacity: 1;
}

/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
  opacity: 0;
}

3. Initialize swup

Finally, we'll load and initialize swup. And we're good to go!

import Swup from 'https://unpkg.com/swup@4?module';

const swup = new Swup();

import Swup from 'https://unpkg.com/swup@4?module';

const swup = new Swup();

Complete example

Putting it all together, this is the complete code required for a basic swup setup.

<html>
  <head>
    <title>Swup Example</title>
    <style>
      html.is-changing .transition-fade {
        transition: opacity 0.25s;
        opacity: 1;
      }
      html.is-animating .transition-fade {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <main id="swup" class="transition-fade">
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </main>
    <script type="module">
      import Swup from 'https://unpkg.com/swup@4?module';
      const swup = new Swup();
    </script>
  </body>
</html>

<html>
  <head>
    <title>Swup Example</title>
    <style>
      html.is-changing .transition-fade {
        transition: opacity 0.25s;
        opacity: 1;
      }
      html.is-animating .transition-fade {
        opacity: 0;
      }
    </style>
  </head>
  <body>
    <main id="swup" class="transition-fade">
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </main>
    <script type="module">
      import Swup from 'https://unpkg.com/swup@4?module';
      const swup = new Swup();
    </script>
  </body>
</html>

Demo

Here's an interactive demo to try out the fade animation we've just built together.

Head to the demo page for more examples.