Eliminate white screen between animations

Eliminate white screen between animations

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".