Barba: Need help with simple Barba V2 & GSAP 3 transition

[gitgudcameron]

I've been trying for a long time now to get a simple page transition with GSAP 3 & Barba V2 working but can't seem to get anything working. I wish there was a simple example of this in the documentation. The two examples on codepen didn't seem to help me (maybe i'm just bad 🤷‍♂).

This is what I have currently. I've tried async / onComplete & returning a promise but not having any luck. If anyone could help, i'd really appreciate it!

See the full code on codesandbox.io

function leaveAnimation(e) {
  var done = this.async();
  gsap.to(e, 1, {
    opacity: 0,
    onComplete: done
  });
}

function enterAnimation(e) {
  return new Promise(resolve => {
    gsap.to(e, 2, { opacity: 1 }).then(resolve());
  });
}

barba.init({
  debug: true,
  transitions: [
    {
      name: "one-pager-transition",
      to: {
        namespace: ["one-pager"]
      },
      sync: true,
      leave: data => leaveAnimation(data.current.container),
      enter: ({ next }) => enterAnimation(next.container)
    }
  ]
});

[pierredarrieutort]

Hi, same issue than here I think (#494) 🤔

[gitgudcameron]

Yes I saw your post and it is very similar, although I was hoping for help with my specific setup or a link to a simple working asynchronous transition example.

Most of the examples that I have seen don't seem to work with the latest version.

[gitgudcameron]

I finally got a simple transition working with gsap 3 & barba V2! 🎉

I'm going to leave this working example here incase anyone else needs to reference it.

The transition function that worked for me looks like this:

function leaveAnimation(container) {
  return new Promise(async resolve => {
    await gsap
      .to(container, {
        duration: 1,
        opacity: 0,
      })
      .then();
    resolve();
  });
}

One really simple thing that took me a while to figure out was making the enter animation work. This was fixed by just adding css to make the barba container positioned absolute:

.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

EDIT: I just realised this won't work if your compiler doesn't support Async / Await. If there is any alternative way to make this work, i'd love to know