I have just discovered Barba.js and find it very useful. It provides smooth transitions between URLs of the same website.
On this website, if you click on “Studiu de caz”, you will be taken to an inner page, with an animated, non-abrupt transition. The script:
$(function(){
var transEffect = Barba.BaseTransition.extend({
start: function() {
this.newContainerLoading.then(val => this.fadeInNewcontent($(this.newContainer)));
},
fadeInNewcontent: function(nc) {
var _this = this;
nc.css('visibility', 'visible');
nc.show().promise().done(() => {
$(this.oldContainer).fadeOut(50);
if (!isMobile.any()) {
$('html, body').delay(100).animate({
scrollTop: 200
},700);
}
});
}
});
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 the one here.
The issue was (still is) discussed on Stackoverflow and there is valuable info there.
