Lb1594 Posted May 19, 2023 Share Posted May 19, 2023 I am new to gsap so I apologise in advance if I am missing something obvious. I've created a sandbox of the issue im having where the element I am trying to pin is not pinning to the top of the viewport when scrolling down the page, the link is here: https://codesandbox.io/s/rough-moon-x34wgz?file=/src/App.js . Any help or advice would be massively appreciated! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 19, 2023 Solution Share Posted May 19, 2023 Hi @Lb1594 and welcome to the GreenSock forums! You are officially another victim of the double call in React's effect hooks (useEffect and useLayoutEffect) as explained here: When using React GSAP Context is your best friend: https://greensock.com/docs/v3/GSAP/gsap.context() Basically you have to create your ScrollTrigger inside a Context instance: useEffect(() => { const ctx = gsap.context(() => { gsap.to(elementRef.current, { scrollTrigger: { trigger: elementRef.current, start: "top top", end: "+=200vh", pin: true, pinSpacing: false, markers: true, } }); }); return () => ctx.revert(); }, []); Finally I'd recommend you to check the resources in this page: Hopefully this helps. Happy Tweening! 1 1 Link to comment Share on other sites More sharing options...
Lb1594 Posted May 20, 2023 Author Share Posted May 20, 2023 @Rodrigo that's really helpful - thanks 🙂 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