Overlay Transiton with barba.js and gsap

[dotun12 2 Likes (Newbie)]

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.

 

 

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;
};

 

See the Pen BayVWQa by onseyi (@onseyi) on CodePen

[ZachSaucier 7,132 Likes (Superhero)]

Hey dotun12 and welcome.

 

Unfortunately we don't have the capacity to help with issues with third party libraries like Barba. This is especially true if you don't provide a working demo (your CodePen demo fails to load all of your resources - check out this post on including external resources in CodePen).

 

Most likely it will be easier to use GSAP with Barba if you use GSAP 3 because it has better support for promises using .then().

[ebinabo 9 Likes (Newbie)]

@dotun12 I would recommend using the v2 barbajs api as it's much more straight forward. However, I noticed there was no onComplete function in your fadeOut tween so the tween plays but the new page is not pushed out of the history object so it stays the same

[ebinabo 9 Likes (Newbie)]

Not sure how to link multiple pages in a codepen but here's how I think this could be implemented in v2

 

`done` is a function that's returned when the current action is complete so it's called after the tl is played and reversed.

next.container ensures the animation doesn't reverse until the page that's being transitioned to is available

Hope this helps

 

const timeline = gsap.timeline({paused: true})

timeline.to('.cover', {left: '100%',  ease: 'power2.out'})

 

barba.init({

    transitions: [

        {

            leave: () => {

                var done = this.async()

                timeline.play().then(() => done())

            },

            enter: ({next}) => {

                var done = this.async()

                next.container && timeline.reverse().then(() => done())

            }

        }

    ]

})