i am trying to make page transition with barba.js and i use beaver builder, page builder framework theme in my website. Problem is that transition works but next page not loads fully, even previous page not load fully. it doesnt load css and javascript libraries after transition loading next pages. i dont know may be it not a loadijg problem i just know that all design distroyed after transition. i tested my code with simple html it works good. but with beaver builder page desing distroy after transition
document.addEventListener("DOMContentLoaded", function ready() {
var lastElementClicked;
var PrevLink = document.querySelector('.menu-item');
var NextLink = document.querySelector('.menu-item');
Barba.Pjax.init();
Barba.Prefetch.init();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var MovePage = Barba.BaseTransition.extend({
start: function() {
this.originalThumb = lastElementClicked;
Promise
.all([this.newContainerLoading, this.scrollTop()])
.then(this.movePages.bind(this));
},
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;
},
movePages: function() {
var _this = this;
var goingForward = true;
this.updateLinks();
if (this.getNewPageFile() === this.oldContainer.dataset.prev) {
goingForward = false;
}
TweenLite.set(this.newContainer, {
visibility: 'visible',
xPercent: goingForward ? 100 : -100,
position: 'fixed',
left: 0,
top: 0,
right: 0
});
TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 });
TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() {
TweenLite.set(_this.newContainer, { clearProps: 'all' });
_this.done();
}});
},
updateLinks: function() {
PrevLink.href = this.newContainer.dataset.prev;
NextLink.href = this.newContainer.dataset.next;
},
getNewPageFile: function() {
return Barba.HistoryManager.currentStatus().url.split('/').pop();
}
});
Barba.Pjax.getTransition = function() {
return MovePage;
};
});
I tested load and onload with functions but result is the same
Can anybody help me to solve this problem. Thank for your attention