Search code examples
javascriptbarbajs

Barba js scroll position


I'm new to barba.js so just trying to get my head round it.

When a page transition is performed, my browser page scroll stays where it was. Is this intentional?

Is it possible to have it so after the transition the next page is loaded at the top like normal?

Here is my code

function pageTransition() {
  var tl = gsap.timeline();

  tl.to('ul.transition li', { duration: .5, scaleY: 1, transformOrigin: "top left", stagger: .2 })
  tl.to('ul.transition li', { duration: .5, scaleY: 0, transformOrigin: "top left", stagger: .1, delay: .1})
}

function contentAnimation() {
  var tl = gsap.timeline();

  tl.from('.hero', { duration: 1, translateY: 50, opacity: 0 })
}

function delay(n){
  n = n || 2000;
  return new Promise(done => {
    setTimeout(() => {
      done();
    }, n)
  });
}

barba.init({
  sync: true,

  transitions: [{
    async leave(data) {
      const done = this.async();

      pageTransition();
      await delay(500);
      done();
    },
    async enter(data) {
      contentAnimation();
    },
    async once(data) {
      contentAnimation();
    }
  }]
});

Solution

  • After checking through the docs again I found the hooks.

    barba.hooks.enter(() => {
      window.scrollTo(0, 0);
    });
    

    This solves the issue if anyone else is having the same issue.