How can I eliminate the white screen “pause” between these animations?

[Ajax30]

On this page, I am using Barbajs to smoothly go from the homepage to an inner page when clicking on “Studiu de caz”.

My animation:

$(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(10).promise().done(() => {
      nc.css('visibility', 'visible');
      nc.fadeIn(10, function() {
        _this.done();
      });
      if (!isMobile.any()) {
        $('html, body').animate({
          scrollTop: 200
        },700);
      }
    });
  }
});
 Barba.Pjax.getTransition = function() {
  return transEffect;
}
Barba.Pjax.start();
});

The between-pages transition is supposed to happen like it does on antoni.de. Yet it does not. There is a “flicker” on my demo site.

What am I doing wrong? How are they doing the transition?

[Author]

Posts