ScrollTrigger pin effect issue: pin-area cannot be pinned in the right place

[JamieLeee]

Hello,

 

I just encountered the issue of pin a section by scrollTrigger in React project

Here is the demo: https://codesandbox.io/s/hopeful-shaw-d5i8oz

 

I would like to use child component to control his child dom pinning effect by simply scroll-trigger setting,
but the pin-dom was always dropped down.

 

Have no idea what went wrong @@

[Rodrigo]

Hi @JamieLeee and welcome to the GreenSock forums!

 

The main issue seems to be caused by React's Strict Mode in this one. You should definitely check and use GSAP Context when working with React, you'll find it super easy to implement and the benefits are quite a few:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

This seems to work in the way you expect:

export default function Demo02() {
  const parent = useRef();

  useEffect(() => {
    const ctx = gsap.context(() => {
      ScrollTrigger.create({
        trigger: ".pinDemo",
        start: "top top",
        pin: true,
        pinSpacing: false,
        end: "bottom 100"
      });
    }, parent)// <- Scope, super useful for selectors, no need to create countless refs

    return () => ctx.revert();// <- Super easy cleanup in your React components!
  }, []);

  return (
    <div
      style={{ width: "100%", height: "100vh", backgroundColor: "lightgreen" }}
      ref={parent}
    >
      <h1> Pin Effect Container </h1>
      <div
        className="pinDemo"
        style={{ width: "100%", height: "100vh", backgroundColor: "green" }}
      >
        <h1>Pin section </h1>
      </div>
    </div>
  );
}

Let us know if you have more questions.

 

Happy Tweening!

[JamieLeee]

Hi Rodrigo, 

big thanks for the quick reply!
also the subjection is really helpful!

 

[JamieLeee]

Sorry for bothering again, I just encounter the similar issue in React,

 

issue codesandbox:

https://codesandbox.io/s/20221109-react-gsap-pin-ycfgno

 

when I wanted to pin sections in order by following the demo code: 

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

),

the last section was always covered.

I also canceled the strict mode in React, but it didn't help.

[Rodrigo]

Hi,

 

I think the main issue is creating a ScrollTrigger instance that pins the container of the slides and setup the slides to have absolute position and use a snap config object for a better feeling.

 

Here is a live example on React, which makes me think that Strict Mode has nothing to do with the issues you are having:

https://codesandbox.io/s/gsap-react-layered-sections-13o6gn?file=/src/Panels.js

 

Let us know if you have more questions.

 

Happy Tweening!