Help > Simple Page transition

[CreativeRobot]

Hey guys.

 

I´m new to the whole coding business.  Have i done it right or could I add something more to the gsap transition timeline,
to make the code stronger ( better)  ? 

 

Greetings from Denmark.

See the Pen XWgGdjm by ren-winther (@ren-winther) on CodePen

[Cassie]

Hi CreativeRobot, Sure, happy to give some pointers.

 

Your first and last tween are doing the same thing, so you don't need both.

You also don't need yoyo in the first one - yoyo alternates the direction of repeating tweens, and that tween isn't repeating

You can add defaults to a timeline if your tweens are using the same values repeatedly.

You could write this in just one tween.
 

gsap.to(".logo", {
  opacity: 0,
  xPercent: -100,
  duration: 1,
  repeat: 1,
  yoyo: true,
  repeatDelay: 5,
  ease: "power1.out",
})

But the ease would be reversed.

Here's another option with separate tweens and the easing you had applied originally.

See the Pen yLXwJea?editors=1010 by GreenSock (@GreenSock) on CodePen

[CreativeRobot]

@Cassie 

 

Amazing - thank you for the quick response. 

Is it possible with gsap > to disable the Y scroll while the page transition is in play? 

 

Also, does the code you updated refresh the page transition automatically in all browser etc.  or should I add some code to do that?

 

René

[Cassie]

I'm not sure what you mean by 'refresh the page transition' I'm afraid. The code will play on page load, but that's all. Does that answer your question?

If you want to block scrolling the usual route is to add height:100vh and overflow:hidden to the body during the transition.

you can add these with GSAP.

[CreativeRobot]

Sorry for the late response. I figured it out with your help so thank you very much