How do I reload my JS scripts after transition ? (Barba)

Question

I want to make nice transitions between my pages with Barba.js, but I noticed that after the transition is done, each animation powered by javascript doesn't work. Does anyone know why, and what I can do to reload my scripts after each transition? Many thanks!

(Here is my Barba code for my transitions:

const wipe = document.querySelector(".wipe-transition");

const tlTrans = gsap.timeline();

function delay(n) {
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

barba.init({
  sync: true,

  transitions: [
    {
      async leave(data) {
        const done = this.async();

        tlTrans.to(wipe, {
          left: "0%",
          ease: "power2.out",
          duration: 0.5,
        });

        await delay(1000);
        done();
      },

      enter(data) {
        tlTrans
          .to(wipe, {
            left: "100%",
            ease: "power2.in",
            duration: 0.5,
          })
          .set(wipe, { left: "-100%" });
      },
    },
  ],
});

)

Answer 1

I see that you have code that initialize stuff. Without being an expert on Barbajs I may have a suggestion. I humbly recommend that you add the code of everything you have to initialize in a function, (to be able to rerun it), and to place it in a strategic place in your code, in order to rerun the initialization after the loading. One way to do it, is by using the after hook, for example:

barba.hooks.after(() => {
  initializtions();
});

But there are definitely other ways to do it. The important part is to know when to rerun initializations, but you can find that with a bit trial and error. Have in your mind to avoid any loops that can slow down or crash your app. Here is a link about hooks, (even if you are already using hooks in your code): https://barba.js.org/docs/advanced/hooks/

Good luck!