Jump to content
GreenSock

CAT is CAT

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

Recommended Posts

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

Link to comment
Share on other sites

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 :) 

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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

 

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.
×