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

The white screen is the body color because you're using promise().done(..) jquery apply the fadeIn after the fadeOut finish so the body color will appear. So, this is an example sort of similar to what you have:

<style type="text/css">
    .One{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #476d80;
        cursor: pointer;
        z-index: 1;
    }
    .Two{
        width: 100%;
        height: 100%;
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        left: 0px;
        background-color: #03A9F4;
        cursor: pointer;
        display: none;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('div.one').click(function(){
            $(this).fadeOut(1000).promise().done(function(){
                $('div.Two').fadeIn(1000);
            });
        });
    });
</script>
<div class="One"></div>
<div class="Two"></div>

like you see in the example above the white screen also appears so if you don't want that just don't use promise().done(..).

$(document).ready(function(){
    $('div.one').click(function(){
        $(this).fadeOut(1000);
        $('div.Two').fadeIn(1000);
    });
});

you can edit your code like this:

$(this.oldContainer).fadeOut(1000).promise().done(() => {
    $('html, body').animate({
        scrollTop: 300
    },1000);
});
nc.css('visibility', 'visible');
nc.fadeIn(1000, function() {
    _this.done();
});