[Pin-spacer breaks UI when using ScrollerTrigger with Next.js]

Thank you so much for your help! @mvaneijgen You've truly made my day. I get it now.

Also, I've just realized that all I need is a just sticky header.

 

See the Pen yLrEVKQ by metal-joker (@metal-joker) on CodePen

[Pin-spacer breaks UI when using ScrollerTrigger with Next.js]

Thank you for providing an excellent guide on creating a stacked card. @mvaneijgen

However, I'm still quite confused, particularly regarding the pin-spacer, as it seems to occupy a significant amount of space when pinning elements. To illustrate my point more clearly, I've created a CodePen demo that can be embedded here.

See the Pen abxKBzX by metal-joker (@metal-joker) on CodePen

 

There's two error in this demo:

1. The title glitches slightly when it is pinned.

2. When the title is pinned, the pin-spacer begins to scroll before the real content, preventing the real content from being fully displayed.

 

I hope this clarifies my question. Thank you for your time once again.

[Pin-spacer breaks UI when using ScrollerTrigger with Next.js]

Hi @mvaneijgen,

Thank you for the prompt reply!

I'm still a bit confused about this situation. What I'm aiming for is something similar to the ScrollTrigger example demo:

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

I have lot of `content`  in `#content-wrapper` when a content scroll to top, pin its title and continue scroll it's content till the content end reaches the top, then pin next content header on top, loop till all content is scrolled.

Timeline can only have one scroll trigger right? I edited origin demo, removed left panel to prevent misleading. ScrollTriggers is disabled by default to show the real layout looks like. Please check it out.
https://stackblitz.com/edit/stackblitz-starters-x9dlh9?file=app%2Fpage.tsx

 

Thank you sincerely for your time!

[Pin-spacer breaks UI when using ScrollerTrigger with Next.js]

I made a minimal reproduce demo with official nextjs and gsap StackBliz template.
https://stackblitz.com/edit/stackblitz-starters-k53gvn?file=app%2Fpage.tsx

 

I'm facing confusion regarding the behavior of the pin-spacer. It seems to be adding a significant blank space between #content1-title and #content. You can verify this by deleting the GSAP hook to observe the original layout.

Any insights or suggestions on resolving this issue would be greatly appreciated. Thank you!