I am using Barba.js
for page transitions in my project, and I have some issues with ScrollTrigger
after navigating between pages.
For example, when I load the homepage, the once function runs perfectly, and everything works as expected. However, when I navigate to the “About” page from the navbar
, the page loads, but ScrollTrigger
does not work. If I refresh the “About” page manually, everything works fine again.
barba.init({
timeout: 5000,
transitions: [{
name: 'default',
async once() {
runAll();
preLoader();
},
async enter() {
console.log("Enter: Refreshing ScrollTrigger");
ScrollTrigger.refresh(true);
await runAll();
},
async beforeEnter() {
console.log("Before Enter");
console.log(ScrollTrigger.getAll()); // Check the status
ScrollTrigger.getAll().forEach(t => t.kill());
console.log(ScrollTrigger.getAll()); // Check the status
console.log("Before Enter: Refreshing ScrollTrigger");
ScrollTrigger.refresh(true);
console.log(ScrollTrigger.getAll()); // Check the status
await runAll(); // Reinitialize necessary functions for the new page
},
}]
});
I added a console.log
statement in the beforeEnter
function, and the final getAll()
returns an empty array.