Flexible and Easy to Use Page-Transition Library | swup

How to make use of it:

Install the swup library.

# NPM
$ npm install swup --save

Import the swup library.

import Swup from 'swup'

Or immediately load the swup file within the doc.

<script src="./dist/swup.js"></script>

<!-- or from a CDN -->
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>

Initialize the swup library and we’re able to go.

const swup = new Swup()

Add the CSS ID ‘swup’ to the aspect you need to animate.

<main id="swup">
  Main content here
</main>

Add an animation class to the aspect.

<main id="swup" class="animation-class">
  Main content here
</main>

Apply your individual transition effects to the web page.

.animation-class {
  /* default animation rules */
}

html.is-animating .animation-class {
  /* CSS styles when animating  */
}

html.is-changing .animation-class {
  /* CSS styles when changing  */
}

html.is-leaving .animation-class {
  /* CSS styles when leaving  */
}

html.is-rendering .animation-class {
  /* CSS styles when rendering  */
}

All default config options.

const swup = new Swup({

      // when this option is enabled, swup disables browser native scroll control (sets scrollRestoration to manual) and takes over this task. 
      // This means that position of scroll on previous page(s) is not preserved (but can be implemented manually based on use case). 
      // Otherwise swup scrolls to top/#element on popstate as it does with normal browsing.
      animateHistoryBrowsing: false,

      // animation selector
      animationSelector: '[class*="transition-"]',

      // defines link elements that will trigger the transition
      linkSelector: 'a[href^="' + window.location.origin + '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup])',

      // stores previously loaded contents of the pages in memory
      cache: true,

      // default container(s)
      containers: ['#swup'],

      // request headers
      requestHeaders: {
        'X-Requested-With': 'swup',
        Accept: 'text/html, application/xhtml+xml'
      },

      // enable/disable plugins
      // see below
      plugins: [],

      // skips popState handling when using other tools manipulating the browser history
      skipPopStateHandling: function skipPopStateHandling(event) {
        return !(event.state && event.state.source === 'swup');
      }

})

Create CSS Transitions When Switching Between Pages, swup Plugin/Github

See Demo And Download