Flexible and Easy to Use Page-Transition Library | swup

Swup is a library that helps you add page transitions to server-side websites. It handles the entire lifecycle of a page visit by intercepting link clicks, loading the new page in the background, replacing content, and transitioning between the old page and the new page.

Its goal is to make adding transitions to a site as simple as possible while providing plenty of other quality-of-life improvements.

Features

  • ✨ Auto-detects CSS transitions for perfect timing
  • 🔗 Updates URLs and preserves native browser history behavior
  • 📦 Uses a cache to speed up subsequent page loads
  • 💡 Offers events for hooking into the lifecycle
  • 🔌 Has a powerful plugin system and many official and third-party plugins
  • 🎨 Provides ready-to-go themes to get started quickly

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

Official Website(swup): Click Here

This superior jQuery/javascript plugin is developed by swup. For extra Advanced usage, please go to the official website.

Related Posts

bootstrap-dropdown-on-hover

[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…

Bootstrap-Fileinput

HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Audio-Visualizations-Wave

How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…

Leave a Reply

Your email address will not be published. Required fields are marked *