Create CSS Transitions When Switching Between Pages – swup

Preview:

Description:

The swup JavaScript library lets you apply custom CSS transitions to pages when switching between them. Supports preload, page cache, and event handlers.

See also:

• CSS3 Based Page Transitions – Animate Transition
• Smooth Page Transitions With JavaScript And PJAX – barba.js

Basic usage:

Install the swup library.

# NPM
$ npm install swup --save

Import the swup library.

import Swup from 'swup'

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

const swup = new Swup()

Add the class ‘swup’ to the main content of your webpage.

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

Add an animation class to the wrapper element.

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

Apply your own transition effects to the 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({
      cache: true,
      animationSelector: '[class^="a-"]',
      elements: ['#swup'],
      pageClassPrefix: '',
      debugMode: false,
      scroll: true,
      preload: true,
      support: true,
      disableIE: false,

      animateScrollToAnchor: false,
      animateScrollOnMobile: false,
      doScrollingRightAway: false,
      scrollDuration: 0,

      LINK_SELECTOR: 'a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]'
})

Changelog:

v1.9.0 (01/07/2019)

• make preloadPage method return Promise

v1.7.18 (01/07/2018)

• fix querySelectorAll issue in form handler and destroy method

v1.7.17 (12/17/2018)

• fix swup getting stuck by errors inside of handlers defined with on method