How to add/initialize other JS files after the page transition which is built with barba & gsap?

[IvyWF]

The problem

Hi! I have 2 html pages. After adding the page transition (with GSAP), everything works fine on my index.html, but for the osaka.html, the part inside the data-barba = "container" where I created a scrolling slider with distortion effect (with Three.js, WebGL, Vanilla.js & Parcel.js <== 'osaka.js' & shader ) doesn't appear at all. It appears again after I refresh the 'osaka' page.

I looked at the Dev tools of Chrome, it seemed that the osaka.html didn't get the 'osaka.js' after the page transition. But the other JS files seemed work normally. (Please note that the cursor.js uses GSAP.)

The code

I found some suggestions on others websites, like using hook or views, and tried to add it to my code:

barba.init({
sync: true,
views: [{
namespace: 'home',
beforeLeave({ next }) {
// do something before leaving the current home namespace
let script = document.createElement('script');
script.src = "scripts/osaka.js";
next.container.appendChild(script);
}
},
{
namespace: 'osaka',
beforeEnter({ next }) {
// do something before entering the osaka namespace
let script = document.createElement('script');
script.src = "scripts/osaka.js";
next.container.appendChild(script);
}
}],
transitions: [{
async leave() {
const done = this.async();
TLAnim
.to(allBandes, { height: '100%', stagger: 0.05 });
await delay(1500);
done();
},
enter() {
TLAnim
.to(allBandes, { height: '0%', stagger: 0.05 });
}
}]
})

In each of my HTML file, inside the data-barba = "container", I added all the scripts and JS files (even if the index.html doesn't use the osaka.js neither the gallery.js) like this:

<...... data-barba="container" data-barba-namespace="home">

    ........ (content)

    <script src="scripts/osaka.js"></script>
    <script src="scripts/cursor.js"></script>
    <script src="scripts/gallery.js"></script>
    <script src="https://unpkg.com/@barba/core"></script>
    <script src="scripts/transition.js"></script>

<......>

Would you please help me to solve this issue? I'm new to barba.js and Three.js, I don't know how to fix this. Thank you very much.

[xavierfoucrier]

Hi @IvyWF,

This issue is more related to how your code is running than Barba v2 issue...

For this kind of question/help, please use the Slack workspace in order to ask the whole community for support.
Join using the invite link here: https://barba.js.org/docs/getstarted/useful-links/#Developer.

[IvyWF]

Ok. Thank you very much.