scrollTrigger horizontal scrolling pin problem

[VoidingInTheMachine]

Hello. 
I'm completely new to gsap and now struggling with some issues. I have written the code below in React/Next js & tailwind, I don't set the p-s-content to overflow hidden because I need to track the scrollbar, when the user gets to the .p-s-content just begin the horizontal scrolling with .parent-section pinned. 

<section
        className={`${className} parent-section w-full h-fit flex flex-col justify-between items-center gap-8 mt-[120px] mb-16`}
      >
        <h2 className="w-full h-fit text-left text-section text-[40px] font-bold">
          {title ?? "Title"}
        </h2>
        <div className="p-s-content relative w-full h-full flex justify-between items-start gap-11">
          {contents?.map((item: IContent, key: number) => {
            return (
              <div
                ref={sliderRef}
                className="w-fit flex flex-row justify-between items-center gap-8 flex-nowrap"
              >
                <div
                  key={key}
                  className="w-max h-full flex flex-col justify-between items-start gap-12"
                >
                  <h3 className="text-[200px] text-left pl-[10px] font-bold text-blue-1">
                    {item?.title}
                  </h3>
                  <div className="w-full max-w-[546px] h-full flex flex-col justify-between items-center gap-8">
                    <p className="text-paragraph text-paragraph-size font-normal leading-10 tracking-[0.8px] pl-[10px]">
                      {item?.abstract}
                    </p>
                  </div>
                </div>
                <Image
                  key={key}
                  className="p-s-img aspect-square max-w-[515px] max-h-[515px] object-cover"
                  src={item?.image}
                  alt={item?.title}
                />
              </div>
            );
          })}
        </div>
      </section>

I tried some demos of the forum but it just didn't suit my case but got me to the code below . (Calculations just made me more and more confused) the pinned element, when I reach the "start" of it , it just get to the bottom of the page and wouldn't stick in it's initial location, so the scrolling, consume I have five items, just went to the middle of the second one and stops. 

imageSliderRef &&
    gsap.to(".p-s-content", {
      ease: "none",
      x: () => +(imageSliderRef.scrollWidth - window.innerWidth),
      scrollTrigger: {
        trigger: ".p-s-content",
        pin: ".parent-section",
        start: "top",
        end: () => `-=${imageSliderRef.scrollWidth - window.innerWidth}`,
        scrub: 1,
        invalidateOnRefresh: true,
        markers: true,
      },
    });

Actually I want the .parent-section stuck to it's position and the scrolling reach the end of the width of the .p-s-content.  

I Couldn't provide any Codepen example but I just made sure I've explained clearly.
Thank you. 

[VoidingInTheMachine]

kay, I implement the code in Codepen, and it works completely fine out there, but when I switch to next js it just broke! 
It's like the pinned element gets absolute position when I scroll! It gets transform: translate(0px, 1026px) out of nowhere and slips down.

<section className="container w-full h-full flex flex-col justify-between gap-8 mt-[120px] mb-16 overflow-x-hidden">
      <h2 className="w-full text-left text-section text-[40px] font-bold">
        {title ?? "Title"}
      </h2>
      <div
        ref={containerRef}
        className="content relative w-full h-full flex flex-row flex-nowrap"
      >
        {workingGroups?.map((item: IWorkingGroupViewData, key: number) => {
          return (
            <div
              key={key}
              className="child shrink-0 w-full h-full min-w-full text-red-1 text-8xl bg-blue-1"
            >
              {key}
            </div>
          );
        })}
      </div>
    </section>

 let childs = gsap.utils.toArray(".child");
    gsap.to(".content", {
      xPercent: -(100 * (childs.length - 1)),
      ease: "none",
      scrollTrigger: {
        trigger: ".container",
        pin: ".container",
        toggleActions: "pause pause reverse reset",
        start: `left left`,
        end: () => `+=${containerRef.offsetWidth} bottom`,
        scrub: 1,
        snap: 1 / (childs.length - 1),
        invalidateOnRefresh: true,
        markers: true,
        anticipatePin: 1,
      },
    });

See the Pen OJYQWrQ by avoiddevoid (@avoiddevoid) on CodePen

 

here is the version of gsap that I use in my project (from package.json): 

"gsap": "^3.12.5",

[GSAP Helper]

Hi there! I see you're using React -

Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

 

Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

If you still need help, here's a React starter template that you can fork to create a minimal demo illustrating whatever issue you're running into. Post a link to your fork back here and we'd be happy to take a peek and answer any GSAP-related questions you have. Just use simple colored <div> elements in your demo; no need to recreate your whole project with client artwork, etc. The simpler the better. 

[VoidingInTheMachine]

Actually it works! Thanks!
Here's the StackBlits demo for anyone who wants to follow up.