React page transition using gsap

[_ayushagrawal]

I am trying to learn page transitions in react using react-transition-groups but what's happening right now is that when I route between the pages the transition effect is showing but all the routes i.e. "/" and "/contact" are rendering for a split second exposing the scrollbar, maybe it's because of the timeout property in the <Transition />. Can someone please tell me what am I doing wrong here

https://codesandbox.io/s/peaceful-bash-902v4

[OSUblake]

Welcome to forums @_ayushagrawal

 

It's hard to say what's going on without seeing a minimal demo. You can make one on CodeSandbox. Thanks!

[_ayushagrawal]

14 minutes ago, OSUblake said:

Welcome to forums @_ayushagrawal

 

It's hard to say what's going on without seeing a minimal demo. You can make one on CodeSandbox. Thanks!

I am sorry it's my first forum  so i was getting a hard time with the codepen url so I pasted the url in the content section. Hope it works

[OSUblake]

11 minutes ago, _ayushagrawal said:

I am sorry it's my first forum  so i was getting a hard time with the codepen url so I pasted the url in the content section.

 

Thanks! The first post can be a little weird because it's expecting a CodePen url.

 

This looks more like a router/CSS issue because it will briefly show both pages at the same time, so overflow is kicking in. You could try setting the outgoing page like this.

gsap.fromTo(
  node,
  {
    position: "absolute",
    top: 0,
    left: 0,
    opacity: 1,
  },
  {
    opacity: 0,
    duration: 1,
  }
);

 

Instead of doing that, I usually just set overflow-y to scroll on the body.

 

body {
  font-family: "Poppins", sans-serif;
  overflow-y: scroll;
}

 

The reason for that is if you have 1 page that doesn't have scrollbars but then you transition to a page that does, it will cause a layout shift by the width of the scrollbar, so I'd prefer having a visible scrollbar over a layout shift.

[_ayushagrawal]

30 minutes ago, OSUblake said:

 

Thanks! The first post can be a little weird because it's expecting a CodePen url.

 

This looks more like a router/CSS issue because it will briefly show both pages at the same time, so overflow is kicking in. You could try setting the outgoing page like this.

gsap.fromTo(
  node,
  {
    position: "absolute",
    top: 0,
    left: 0,
    opacity: 1,
  },
  {
    opacity: 0,
    duration: 1,
  }
);

 

Instead of doing that, I usually just set overflow-y to scroll on the body.

 

body {
  font-family: "Poppins", sans-serif;
  overflow-y: scroll;
}

 

The reason for that is if you have 1 page that doesn't have scrollbars but then you transition to a page that does, it will cause a layout shift by the width of the scrollbar, so I'd prefer having a visible scrollbar over a layout shift.

Oh thanks a lot it solved the problem, now when the transition is clear without the scroll shift I realized that the exiting animation is not kicking in. Sorry for the trouble should've noticed it earlier.