Swup is a complete, flexible, expandable, and easy-to-use transition library for your web. This JavaScript library lets you apply custom CSS transitions to pages when switching between them.
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 Usages, please go to the official website.
Be First to Comment