JamieLeee Posted November 4, 2022 Share Posted November 4, 2022 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 @@ Link to comment Share on other sites More sharing options...
Rodrigo Posted November 4, 2022 Share Posted November 4, 2022 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! Link to comment Share on other sites More sharing options...
JamieLeee Posted November 5, 2022 Author Share Posted November 5, 2022 Hi Rodrigo, big thanks for the quick reply! also the subjection is really helpful! Link to comment Share on other sites More sharing options...
JamieLeee Posted November 9, 2022 Author Share Posted November 9, 2022 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 9, 2022 Share Posted November 9, 2022 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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now