Page transitions: GSAP animation work perfectly only the first time... How to fix this?

[CAT is CAT]

Hi, I'm new to Gsap & I'm working on page transitions.

 

The idea is to have a transition from the about page and the home page with a centered logo animation, very simple.

I click on my button, the transition come in, the logo scale from 0 to 1 and go down fading, great! 

The first animation work fine but when I clicked again the scale factor is now missing unfortunately...

 

How can i fix this?

 

HERE my codepen:

https://codepen.io/cat999/project/editor/AEeEdg

See the Pen AEeEdg by cat999 (@cat999) on CodePen

[ZachSaucier]

Hey CAT and welcome to the GreenSock forums!

 

The problem is that you are animating an element to a width of 100% but the value is still at 100% the next time that it's ran (so there's nothing left to animate). The easiest fix is to use a .fromTo instead:

tl.fromTo(".loading-screen", {width: 0, left: 0}, {
  duration: 1,
  width: "100%",
  left: "100%",
  ease: "power4.inOut",
  delay: 0.3,
});

Also your ease formatting was invalid - you should either use the longer object form or the condensed string form - mixing the two is no good  

[CAT is CAT]

Thanks @ZachSaucier, fantastic. 

Could you show what I should change in this snippet  and also how to not mixing ease formatting? 

function delay(n) {
    n = n || 2000;
    return new Promise((done) => {
        setTimeout(() => {
            done();
        }, n);
    });
}

function pageTransition() {
    var tl = gsap.timeline();
  
    
    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        left: "0%",
        ease: "Expo.easeInOut",
    });
  
  

  
  
      tl.to("#svg-1", {
       duration: 1,  opacity: 0,  y: 30, stagger: 0.4, delay: 0.2, 
    });
  

    tl.to(".loading-screen", {
        duration: 1,
        width: "100%",
        left: "100%",
        ease: "Expo.easeInOut",
        delay: 0.3,
    });
  
      tl.set(".loading-screen", { left: "-100%", });
      tl.set("#svg-1", { opacity: 1,  y: 0 });
}

function contentAnimation() {
    var tl = gsap.timeline();
    tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}

$(function () {
    barba.init({
        sync: true,

        transitions: [
            {
                async leave(data) {
                    const done = this.async();

                    pageTransition();
                    await delay(2000);
                    done();
                },

                async enter(data) {
                    contentAnimation();
                },

                async once(data) {
                    contentAnimation();
                },
            },
        ],
    });
});

Would be very helpful

[CAT is CAT]

I also would need to change the cursor  style to cursor:progress  during the black transition but it wont work (newbie),

there is an easy solution for that? 

[ZachSaucier]

CodePen projects aren't very forkable... So here's untested code  

 

function delay(n) {
  n = n || 2000;
  return new Promise((done) => {
    setTimeout(() => {
      done();
    }, n);
  });
}

function pageTransition() {
  var tl = gsap.timeline();


  tl.fromTo(".loading-screen", {width: 0, left: 0}, {
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "expo.inOut",
    delay: 0.3,
  });





  tl.to("#svg-1", {
    duration: 1,  opacity: 0,  y: 30, stagger: 0.4, delay: 0.2, 
  });


  tl.to(".loading-screen", {
    duration: 1,
    width: "100%",
    left: "100%",
    ease: "expo.inOut",
    delay: 0.3,
  });

  tl.set(".loading-screen", { left: "-100%", });
  tl.set("#svg-1", { opacity: 1,  y: 0 });
}

function contentAnimation() {
  var tl = gsap.timeline();
  tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 });
}

$(function () {
  barba.init({
    sync: true,

    transitions: [
      {
        async leave(data) {
          const done = this.async();

          pageTransition();
          await delay(2000);
          done();
        },

        async enter(data) {
          contentAnimation();
        },

        async once(data) {
          contentAnimation();
        },
      },
    ],
  });
});

 

50 minutes ago, CAT is CAT said:

I also would need to change the cursor  style to cursor:progress  during the black transition but it wont work (newbie),

there is an easy solution for that? 

I don't know if you can change the cursor with only JS... You can just set it in CSS:

.loading-screen {
  cursor: progress;
}