Barba.js not load page fully on transition beaver layouts

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

Hi,

I’ve only tried to use barba.js once and could never get it to work 100% as it added bloat to the page load. However, you can follow the steps on the guide below. Note, I haven’t tested this personally.

https://akosweb.com/development/using-barba-js-and-pjax-page-transitions-with-beaver-builder/

1 Like

i tested it

function my_global_builder_posts( $page_ids ) {
    $page_ids = get_all_page_ids();
    return $page_ids;
}
add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );

or

function my_global_builder_posts( $post_ids ) {
    $post_ids = get_all_page_ids();
    return $post_ids;
}
add_filter( 'fl_builder_global_posts', 'my_global_builder_posts' );

doesnt worked any of them.
i spent this all week to fix this problem. But there is no result… i dont know what is the problem… and browser console dont show anything about problem

i changed my code and added NAMESPACE to every page with ACF for init function but problem still the same

document.addEventListener('DOMContentLoaded', function() {

    Barba.Pjax.init();
    Barba.Prefetch.init();

    var Homepagep = Barba.BaseView.extend({
        namespace: 'homep',
	  sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Homepagep.init();

    var Aboutp = Barba.BaseView.extend({
        namespace: 'aboutp',
	  sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Aboutp.init();
    
    var Newsp = Barba.BaseView.extend({
        namespace: 'newsp',
	  sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Newsp.init();
    
    var Tedbirlerp = Barba.BaseView.extend({
        namespace: 'tedbirlerp',
	  sync: true,
        onEnter() {},
        onEnterCompleted() {},
        onLeave() {},
        onLeaveCompleted() {}
    });

    Tedbirlerp.init();

    var pageTransition = Barba.BaseTransition.extend({
        start: function() {
            this.newContainerLoading.then(
                val => this.fadeInNewcontent(this.newContainer, this.oldContainer)
            );
        },
        transitionFinished(newContainer, oldContainer) {
            newContainer.style.visibility = "visible";
            window.scrollTo(0, 0);
            this.done();
        },
        fadeInNewcontent: function(newContainer, oldContainer) {
            newContainer.classList.add('new');

            var _this = this;

            const transition = this.oldContainer.animate([
                { opacity: 1 }, 
                { opacity: 0 }
            ], {duration: 1000});

            transition.onfinish = function() {
                _this.transitionFinished(newContainer, oldContainer);
            };
        }
    });

    Barba.Pjax.getTransition = function() {
        return pageTransition;
    }

    Barba.Pjax.start();

}, false);

do you have any other comapitible alternative to use instead of barba.js .

Unfortunately, I am not aware of any other compatible alternatives. As I mentioned previously I was never able to get it to work. You could try contacting one of our recommended builders who may be able to help. :slight_smile: