ScrollTrigger pin breaking on using react-transition-group page transition in Next js

[CuteAppi]

On clicking the link scrollTrigger in the below  error demo and scrolling the section is not being pinned but on manually refreshing the page the it is getting pinned and works fine, on removing any transition animations the pin works as well still works.

 

Here's a link to the same error that I replicated.

https://stackblitz.com/edit/nextjs-rdx4ro?file=pages%2Fscroll.js

 

P.S I am a gsap noob and im still learning

[Rodrigo]

Hi @CuteAppi and welcome to the GreenSock forums!

 

The reason for this is because of two things:

1. When the ScrollTrigger instance is created in the scroll page, the transition is not yet completed, so ScrollTrigger does it's calculations when the element is still at the left of the sreen.
2. 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:
   https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children

The solution is to wait for the transition to be completed (as seen in the layers page) and clear the styles of the container that is animated in the page transition.

 

Here is a fork of your example that is working as expected:

https://stackblitz.com/edit/nextjs-66r8rm?file=components%2FTransition.js,pages%2Fscroll.js

 

Hopefully this helps.

Happy Tweening!

[CuteAppi]

Thank you sooo much I havent spent hours banging my head on this 💀 but while refreshing the page all the sroll triggered animations die

[Rodrigo]

Hi,

 

In the transition context file, just set the initial value for the completed boolean to true.

const [completed, setCompleted] = useState(true);

Since the boolean is always set to false in the onEnter hook it should work as expected. Just in case though as an extra safety measure I moved the toggle method to the onExit hook of the transition component just in case:

onExit={(node) => {
  toggleCompleted(false);
  gsap
    .timeline({ paused: true })
    .to(node, { scale: 0.8, duration: 0.2 })
    .to(node, { xPercent: 100, autoAlpha: 0, duration: 0.2 })
    .play();
}}

That seems to work as expected.

Happy Tweening!

[CuteAppi]

Thank you so much bro your a life saver