Wanted to add my 2 cents as I stumbled across this thread in my own search for help with gsap/barba.
So far this seems to work for me. Still in dev so no warranties on production level code here
var tlLoader = new TimelineMax({}); //Using timeline in my project
var FadeTransition = Barba.BaseTransition.extend({ //define the transition in barba
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()]) //when new container is loading run you transition animation
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
var deferred = Barba.Utils.deferred(); //define deferre so you can wait for transition to complete
tlLoader.set('#loader',{y:'0%'}); //run your fade in tweens here I'm Morphing a svg over my content but you can do whatever you wish
tlLoader.to('#loader-bg-svg-path', 1, {morphSVG:'M 0 -5 L10 -10 L10 15 L0 20 Z',ease:Linear.easeNone,
onComplete: function () {
deferred.resolve();
}
});
return deferred.promise; //return deferred to promise so we can move to fadeIn step
},
fadeIn: function() {
document.body.scrollTop = 0; //this scrollTop might be redundant Im still in dev with this
this.scrollTop();
var $el = $(this.newContainer); //run your fade out tweens here
tlLoader.to('#loader-bg-svg-path', 0.7, {morphSVG:'M 0 15 L10 10 L10 15 L0 20 Z',ease:Linear.easeNone});
tlLoader.to('#loader', 0, {y:'-100%',ease:Linear.easeNone});
tlLoader.set('#loader-bg-svg-path', {morphSVG:'M 0 -5 L10 -10 L10 -5 L0 0 Z',ease:Linear.easeNone});
this.done();
},
scrollTop: function() {
var deferred = Barba.Utils.deferred();
var obj = { y: window.pageYOffset };
TweenLite.to(obj, 0.4, {
y: 0,
onUpdate: function() {
if (obj.y === 0) {
deferred.resolve();
}
window.scroll(0, obj.y);
},
onComplete: function() {
deferred.resolve();
}
});
return deferred.promise;
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};