Transition video tutorial between pages with Swup

I propose you to discover the Swup library. This library will allow you to quickly and easily set up a transition effect between the different pages of your site.
To create this transition effect the library will work like the Turbolinks library by introducing more features related to the management of animations.

The principle

The library will automatically graft a behavior on all the internal links of your application. When the user clicks on a link, the native behavior will be diverted to an AJAX loader on the next page. Once the loading done the content will be injected into the current page.

To create the transition effect different classes are added to your tag during the different stages of loading.

use

The library is very easy to use.
We start by surrounding the content that we want to replace between each page of an element with the id SWUP and we initialize the JavaScript.

import Swup from 'swup'

const swup = new Swup ()

Then, in order to see the elements disappear and appear between the pages, it will be necessary to define CSS transitions. By default, the class must start with transition- so that Swup can observe the end of the animation (it is possible to change this behavior if necessary).

.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

We will add this class to our elements

There you go ! From now on the pages load with a transition effect.