2

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?

van
  • 158
  • 1
  • 2
  • 12

2 Answers2

4

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.

BastC
  • 66
  • 4
  • 1
    Thanks! as my scripts are behaviour driven I needed to re-init the actual file rather than the functions withint hem, so I've paired your answer with this one (https://stackoverflow.com/a/9642359/10084649) and it works :) – van Nov 19 '20 at 16:51
1

In my case this helped:

barba.hooks.after(() => {
const bottomDOM = document.getElementsByTagName("body")[0]
const newScript = document.createElement("script")
const oldScript = document.querySelector(".main-script")
newScript.src = "js/main-dist.js"
newScript.className = "main-script"
oldScript.remove()
bottomDOM.appendChild(newScript)
})

I have a <script class="main-script"></script> at the end of the DOM, and use barba.hook to remove it and then add it again

Marcin Mroczko
  • 143
  • 1
  • 12