transition.oldContainer.parentNode.removeChild(transition.oldContainer)
resolve(transition)
})
})
// Sample Transition:
const animate = transition => new Promise((resolve, reject) => {
transition.newContainer.setAttribute("style", "visibility: visible; opacity: 1;");
resolve(transition)
})
const finish = transition => {
transition.deferred.resolve()
}
const customTransition = Barba.BaseTransition.extend({
start: function() {
loadPage(this)
.then(animate)
.then(finish)
}
})
const transition = () => {
// this pulls the content when user hovers, making it super fast
Barba.Prefetch.init()
Barba.Pjax.init()
Barba.Pjax.getTransition = () => customTransition
}
transition()
const FadeInOutTransition = Barba.BaseTransition.extend({
direction: 1,
start: function() {
this.setDirection();
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
const deferred = Barba.Utils.deferred();
TweenMax.to(this.oldContainer, 0.3, {
opacity: 0,
x: -40 * this.direction,
ease: Power2.easeIn,
onComplete: () => {
window.scroll(0, 0);
deferred.resolve();
}
});
return deferred.promise;
},
fadeIn: function() {
this.done();
setChapterLink();
TweenMax.fromTo(this.newContainer, 0.3,
{
opacity: 0,
x: 40 * this.direction
},
{
opacity: 1,
x: 0,
ease: Power2.easeOut,
}
);
},
setDirection: function() {
const oldChap = Barba.HistoryManager.prevStatus().url.split('/').slice(-2, -1)[0].replace('chapter', '');
const newChap = Barba.HistoryManager.currentStatus().url.split('/').slice(-2, -1)[0].replace('chapter', '');
this.direction = newChap - oldChap;
}
});