I’m using Barba.js for smooth page transitions on my website, and everything works fine when navigating between different pages. For example, when moving from the homepage to the “about” page, all GSAP and ScrollTrigger animations run without any issues. Below is a simplified version of my Barba.js configuration:

barba.init({
sync: true,
timeout: 5000,
transitions: [{
name: 'default',

async once() {
  ...
  runAll();  // Initializes all JavaScript functions
},

async afterEnter() {
  ...
  await runAll();  // Re-initializes after each transition
    },
  }]
});

barba.hooks.beforeEnter(() => {
ScrollTrigger.getAll().forEach(t => t.kill());
ScrollTrigger.refresh(true);
 ...
});

In the runAll() function, I run all my JavaScript code, including ScrollTrigger setups.

The issue occurs when I change the website’s language (so when there is a transition on the same page). For example, when the URL changes from exampleurl.com/en to exampleurl.com/de, the page content updates correctly, but GSAP ScrollTrigger and some JavaScript functions do not work as expected. The strange part is that all functions seem to be executed (confirmed by console.log), but the animations don’t trigger until I manually refresh the page. After refresh the page everything works perfect.

It seems like something is missing during the language switch that Barba.js handles correctly during regular page transitions but fails during URL changes within the same page.

Has anyone encountered this issue, or does anyone have suggestions for fixing this without requiring a page refresh?

Thanks in advance!