jQuery: eliminate white screen “pause” between animations

Question

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

Answer 1

How about using setTimeout() to overlap the fade out and fade in? That should keep it from blanking out completely, which want to avoid.

You could try something like the following:

$(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;

      // manipulate these values
      let fadeOutTime = 1000;
      let fadeInTime = 1000;
      let overlapTime = 100;

      $(this.oldContainer).fadeOut(fadeOutTime);

      // use setTimeout() to begin fadeIn before fadeOut is completely done
      setTimeout(function () {
        nc.css('visibility', 'visible');
        nc.fadeIn(fadeInTime, function() {
          _this.done();
        });

        $('html, body').animate({
          scrollTop: 300
        }, fadeInTime);

      }, fadeOutTime - overlapTime)

    }
  });
  Barba.Pjax.getTransition = function() {
    return transEffect;
  }
  Barba.Pjax.start();
});

NOTE: This is just a stab at it, the plunker is helpful, but it's hard to see the animation in action.

UPDATE

I think you'll need something like the above, but if you want to fade in/out of black, then you'll also want to do something like create a div wrapper around all of your content within your body and give that div the background color of your app, #eff3f6, and then making the actual body background black. You'll have some work to get the exact effect you desire, but something like that or in the SO link in the comments below should help.