jQuery: eliminate white screen "pause" 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.

$(document).ready(function() {
  var transEffect = Barba.BaseTransition.extend({
    start: function() {
      this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
    },
    fadeInNewcontent: function(nc) {
      nc.hide();
      var _this = this;
      $(this.oldContainer).fadeOut(1000).promise().done(() => {
        nc.css('visibility', 'visible');
        nc.fadeIn(1000, function() {
          _this.done();
        });
        $('html, body').animate({
          scrollTop: 300
        },1000);
      });
    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

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 (click "view case").

from jQuery: eliminate white screen "pause" between animations