Jump to content


Overlay Transiton with barba.js and gsap

Recommended Posts

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.




var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
        .all([this.newContainerLoading, this.fadeOut()])

  fadeOut: function() {

      const TransitionPromise = new Promise(function(resolve){
        const OutTransition =  new TimelineMax();
       // .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

Link to comment
Share on other sites

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().

Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

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'})
    transitions: [
            leave: () => {
                var done = this.async()
                timeline.play().then(() => done())
            enter: ({next}) => {
                var done = this.async()
                next.container && timeline.reverse().then(() => done())
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.