Barba.js and locomotive-scroll are incompatible?

Question

I have tried barba.js and locomotive-scroll to work (I also tried scrollmagic) and I am not getting it working fine. If I put locomotive-scroll on the about page and reload the browser, it works, but if I go from there to the home page and go back to about page, it gives me an error and stops working. With other scripts there are no problems, that's why I consider that there must be some incompatibility. I have tried many ways and they all give me an error. The last one is:

$(function () {
  barba.init({
   sync: true,
   cacheIgnore: false,
   transitions: [
    {
     async leave(data) {
      const done = this.async();
      pageTransition();
      await delay(1000);
      done();
     },

     async enter(data) {
      contentAnimation();
     },

     async once(data) {
      contentAnimation();
     },
    },
   ],
   views: [{
    namespace: 'about-section',
    beforeEnter({ next }) {
      let script = document.createElement('script');
      script.src = 'http://127.0.0.1:5000/locomotive-scroll.js';
      next.container.appendChild(script);
    }
   }]

 });
});

score 0 · Answer 1 · answered Aug 07 '20 at 10:07

It is a little bit late, but please add an example, so we can debug it.

By my guess, it could be if you add multiple times the same script -> locomotive-scroll.js.

It could be also from the async/await syntax. I had a similar issue and removing it, solved it.

barba.init({
   sync: true,
   cacheIgnore: false,
   transitions: [
    {
     leave(data) {
      pageTransition();
     },

     enter(data) {
      contentAnimation();
     },

     once(data) {
      contentAnimation();
     },
    },
   ],
   views: [{
    namespace: 'about-section',
    beforeEnter({ next }) {
      let script = document.createElement('script');
      script.src = 'http://127.0.0.1:5000/locomotive-scroll.js';
      script.setAttribute('id', 'loco-scroll-id');
      next.container.appendChild(script);
    },
    beforeLeave({current}) {
      current.container.querySelector('loco-scroll-id').remove();
    }
   }]
 });

Also, one more question, is it on purpose to use Locomotive Scroll only in about page? If not, you could simply add it outside of the barba-container, so it will not reload it every time you change the link.

Barba.js and locomotive-scroll are incompatible?

1 Answers1