How to reinit custom js files between pages (Barba.js)?

I have Barba.js working on a website I am developing, I have debugged some other issues but I've noticed my jS isn't reinitialising between pages, which is not the intended behaviour. Please see my code below (I have removed my actual site content for the purposes of DRY):

index.html:

<head>
<!--- Default Page Values -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png" />
<title>TEST.</title>
<!--- Load Local Styles -->
<link type="text/css" rel="stylesheet" href="fonts/fontsauce.css" />
<link rel="stylesheet" href="css/globals.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/videoModal.css">
<!--- End Load Local Styles -->
<!--- Load Local Scripts -->
<script src="js/lib/jQuery/jquery-3.5.1.min.js"></script>
<script src="js/lib/anime/anime.min.js"></script>
<script src="js/lib/parallax/parallax.min.js"></script>
<script src="js/lib/barba/2.9.7/barba.umd.js"></script>
<!--- End Load Local Scripts -->
<!--- Load External Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<!--- End Load External Scripts -->
</head>

<body id="barba-wrapper" data-barba="wrapper">
   <main class="barba-container" data-barba="container" data-barba-namespace="home">

      // all my website content //

   </main>

   <script src="js/introParams.js"></script>
   <script src="js/parallaxParams.js"></script>
   <script src="js/content.js"></script>
   <script src="js/videoModal.js"></script>
   <script src="js/pageTransitions.js"></script>

</body>

pageTransitions.js:

barba.init({

    transitions: [{
        name: 'diffuse-transition',
        leave(data) {
            return gsap.to(data.current.container, {
                opacity: 0
            });
        },

        beforeEnter: ({ next }) => {
            window.scrollTo(0, 0);
        },

        enter(data) {
            return gsap.from(data.next.container, {
                opacity: 0
            });
        }
    }]
});

The problem as I understand it, is that each time the content from a new page is loaded into the DOM, it's not re-initialising my other scripts. Any ideas how I can re-init my other scripts correctly?

Solution

Like you do for resetting scroll in the beforeEnter callback you also need to call your init methods from your scripts to reset them on a new page load. You also have afterEnter if you need to access the new page dom. From the barba.js doc :

barba.init({
  views: [{
    namespace: 'home',
    beforeEnter() {
      // re-init/reset script default function on before page load
      myScriptInit();
    },
    afterEnter() {
      // refresh parallax on new page content
      parallax.refresh();
    }
  }]
});

I suggest you take a look at the lifecycle of barba.js to help you.