Barba: Make sync transition with GSAP 3

[pierredarrieutort]

I've been trying to make my Barba transitions synchronous for a long time now, but with GSAP 3, only my "Once" transition is synchronous unlike "Enter" and "Leave".

~I pushed a reproducible branch in my project to be more explicit in my issue: you can click here.~

I can't figure out if this is a problem with barba or an error on my part, can you give me a new perspective on it ?

[gitgudcameron]

Hope this helps you @pierredarrieutort

[pierredarrieutort]

@gitgudcameron Oh, interesting, i'm not very familiar with async/await concept but I've tried to applicate your example at my case and it don't resolve my problem: the animation still have a weird behavior :'(

I share the snippet ith you in case you'll see a mistake (the rest of snippet is still same as my previous post)

function transition( container, isReversed ) {
    return new Promise( async resolve => {
        await gsap.timeline( {
            reversed: isReversed,
            defaults: { duration: .4 },
            onComplete: resolve
        } )
            .fromTo( document.getElementById( 'body-background' ), { width: 0, x: 0 }, { width: '80%', ease: 'linear' }, 1 )
            .from( container, { x: '-100%' }, '>' )
            .to( document.getElementById( 'body-background' ), { width: 0, x: '100vw' }, '<' )
            .from( document.querySelector( '#menuWrapper svg' ), { left: '100%' }, '<.2' )
    } )
}

EDIT : The behavior is now : the "once" opens, when i click on a link, the "exit" happens, then nothing happens...

[gitgudcameron]

I'm only new to this but maybe you could try this? Removing the onComplete and adding a .then(resolve()):

  function transition(container, isReversed) {
    return new Promise(async resolve => {
      await gsap.timeline({
        reversed: isReversed,
        defaults: { duration: .4 }
      })
        .fromTo(document.getElementById('body-background'), { width: 0, x: 0 }, { width: '80%', ease: 'linear' }, 1)
        .from(container, { x: '-100%' }, '>')
        .to(document.getElementById('body-background'), { width: 0, x: '100vw' }, '<')
        .from(document.querySelector('#menuWrapper svg'), { left: '100%' }, '<.2')
        .then(resolve())
    });
  }

[pierredarrieutort]

function transition( container, isReversed ) {
    return new Promise( async resolve => {
        await gsap.timeline( {
            reversed: isReversed,
            defaults: { duration: .4 },
            onComplete: resolve,
            onReverseComplete: resolve
        } )
            ...My_GSAP_Tween_here...
    } )
}

Thanks for the help @gitgudcameron,
I've found an other trick, in fact it's because I check the "reverse" status of my tween : I need to mark the async/await function as resolved at the tween completed and his reverse completed 😅

I keep this issue opened to let the Barba team answer if an other way exists 🤔

[xavierfoucrier]

Hi @pierredarrieutort,

I recently updated the Barba documentation, and gsap has evolved since you post this issue.
As the legacy example, you can use a shorter syntax like:

function transition(container, isReversed) {
  return gsap.timeline({
    defaults: {
      duration: .4
    }
  }).to(
    // gsap stuff here...
  );
});

Hope this help :wink:
Closing the issue.