Barba.js page transition: ScrollTrigger not working after navigating to a new page

  Kiến thức lập trình

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.

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website Kho Theme wordpress Kho Theme WP Theme WP

LEAVE A COMMENT