Overlay Transiton with barba.js and gsap

[onseyi]

I am trying to make a simple overlay transition effect with barba and gsap. when I click on the Page 02 link the overlay transition effect move across the page from left to right but the page did not change, I will have to click on the link the second time for the page to change how can I fix this thanks.

https://codepen.io/onseyi/pen/BayVWQa

Barba.Pjax.start();

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
      Promise
        .all([this.newContainerLoading, this.fadeOut()])
        .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {

      const TransitionPromise = new Promise(function(resolve){
        const OutTransition =  new TimelineMax();
        OutTransition
       // .set(".cover", {display:"block", y:"100%"})
        .to(".cover", 0.5, {width: "100%", ease: Power2.easeOut})
        .to(".cover", 0.5, {width: "0", left:"100%", ease: Power2.easeOut})
        //.set(".cover", {display:"none"});
    });
    return TransitionPromise;      

  },

  fadeIn: function() {
      let _this = this;
      //TweenLite.set(this.oldContainer, {display:"none"});
      TweenLite.to(this.newContainer, 0.1, {opacity:1, onComplete:function(){ _this.done(); }  });
  }
});

Barba.Pjax.getTransition = function() {
  return FadeTransition;
};

[xavierfoucrier]

Hi @onseyi,

The code you are using is for BarbaJS v1, which is no longer maintained anymore... you should take a look at the v2: https://barba.js.org

You will have more recent examples and better support on Github/Slack with the new version :wink:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.