I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.

I have put together a Plunker consisting of two pages (index.html and about.html) that are loaded smoothly, with the help of jQuery’s fadeIn() and fadeOut() methods.

1. $(document).ready(function() {
2. var transEffect = Barba.BaseTransition.extend({
3.     start: function() {
4. this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
5.     },
6.     fadeInNewcontent: function(nc) {
7.       nc.hide();
8. var _this = this;
9.       $(this.oldContainer).fadeOut(1000).promise().done(() => {
10.         nc.css('visibility', 'visible');
11.         nc.fadeIn(1000, function() {
12.           _this.done();
13.         });
14.         $('html, body').animate({
15.           scrollTop: 300
16.         },1000);
17.       });
18.     }
19.   });
20.   Barba.Pjax.getTransition = function() {
21. return transEffect;
22.   }
23.   Barba.Pjax.start();
24. });

The problem with this animations is that there is a white screen interval between them. How could I eliminate this interval, to make the transition smoother?

By "smoother" I mean similar to  this one  (wait 2, 3 seconds, then click "view case"). I mean, an "invisible transition".