I have 2 html pages: index.html & osaka.html.
The problem: 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) 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.
Here are the JS files and script:
For all HTML pages:
- cursor.js for Cursor effect on all html pages (using GSAP)
- transition.js for page transition (using Barba.js and GSAP)
For osaka.html:
- osaka.js for Scrolling slider & distortion effect (using Three.js, WebGL, Vanilla.js & Parcel.js)
- gallery.js for Image opened on click (JavaScript, no frameworks)
I found some suggestions like using hook or views, and tried to add it to my code, but it didn't work:
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:
<body data-barba="wrapper">
...... (content)
<main 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>
</main>
...... (content)
</body>
Would you please help me to solve this issue? I'm new to barba.js and Three.js, I don't know how to modify my code. Thank you very much.