React Page Transition and Pinned ScrollTrigger not compatible

[TaiwoJazz]

Hi Guys. This should be a very straight one. 

So i have this animation that uses scroll trigger and pinned the page. Pretty smooth with no issue.
Check it out https://stackblitz.com/edit/circle-scroll-trigger?file=src%2FApp.js

 

Now i have another project that uses React page transition. So i added the above animation to the scroll trigger page.
Check it out here https://stackblitz.com/edit/react-spyzevefwe?file=src%2Fviews%2FScroll.js
The issue comes when i switch between pages and i tried to scroll down to the animation, It just disappeared. But if i refresh the page, everything works fine.

I think the page transition is interfering with the scroll trigger animation.

Appreciate all the help i can get. Thanks.

[Rodrigo]

Hi

 

This thread should clarify the issue

 

Happy Tweening!

 

 

[TaiwoJazz]

Hi there.

I have gone through the link you provided and i have implemented the changes mentioned there.
However, the issue still persist.  Not sure if it's because i'm using react and the other example is in NextJS.
Here is a demo after the implemented changes.
https://stackblitz.com/edit/react-spyzevefwe?file=src%2Fviews%2FScroll.js

@Rodrigo Kindly take a look at the link above. Not sure why it's still now working. Thanks.

[TaiwoJazz]

Quote

After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum.

I think the thread you sighted has lost the context. Looks like the user updated his code with your solution so i was unable to actually see the changes form the code you make changes to and the changes you make to the code in the Scroll.js file

[TaiwoJazz]

On 1/6/2024 at 11:54 PM, TaiwoJazz said:

Hi there.

I have gone through the link you provided and i have implemented the changes mentioned there.
However, the issue still persist.  Not sure if it's because i'm using react and the other example is in NextJS.
Here is a demo after the implemented changes.
https://stackblitz.com/edit/react-spyzevefwe?file=src%2Fviews%2FScroll.js

@Rodrigo Kindly take a look at the link above. Not sure why it's still now working. Thanks.

Check this yet?

[Rodrigo]

Hi,

 

The issue is that you didn't fully checked the explanation in this SO answer:

https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

 

And the explanation I gave on the subject:

On 5/23/2023 at 11:38 AM, Rodrigo said:

You are using pinning in ScrollTrigger. The transition animation uses transform (Scale and X) and pinning uses position fixed. When an ancestor of a fixed element has a transform applied to it it breaks the way it behaves:

That's why in the demo I link there we're using this line:

onEnter={(node) => {
  gsap.set(node, { autoAlpha: 0, scale: 0.8, xPercent: -100 });
  gsap
    .timeline({
    paused: true,
    onComplete: () => {
      // HERE!!
      gsap.set(node, { clearProps: 'all' });
      toggleCompleted(true);
    },
  })
    .to(node, { autoAlpha: 1, xPercent: 0, duration: 0.25 })
    .to(node, { scale: 1, duration: 0.25 })
    .play();
}}

That basically removes all the transforms from the parent node in the route view which causes the issue with pinning as explained. Here is your transition config:

onEnter={() => {
  toggleCompleted(false);
  gsap.set(page.current, { autoAlpha: 0, scale: 0.8, xPercent: -100 });
  gsap
    .timeline({
    paused: true,
    onComplete: () => toggleCompleted(true),
  })
    .to(page.current, { autoAlpha: 1, xPercent: 0, duration: 0.5 })
    .to(page.current, { scale: 1, duration: 0.5 })
    .play();
}}

Adding the set instance that clear the props, should fix the issue.

 

Happy Tweening!

[TaiwoJazz]

@Rodrigo I must say that i really do appreciate your effort and you time. 

Sometimes it can just be very funny considering that fact that i kept looking at that component and i didn't notice that added line. I was more fixed on Scroll.js component.

Thanks a lot. God bless you.

[Rodrigo]

Just now, TaiwoJazz said:

I was more fixed on Scroll.js component.

Yeah, keep in mind that those files (route views) have nothing to do with the actual page transition, that is done in the component with the SwitchTransition. Whenever something breaks because of a page transition look either there or in the router file.

 

Great to hear that this helped and sorry for the delay in the response.

Happy Tweening!

[TaiwoJazz]

Yeah. Much understood now.

Really appreciate your time. 💯