unni Posted December 1, 2023 Share Posted December 1, 2023 i am trying to pin a heading but it works fine on codepen but its not working correctly in my next js . what i am trying to do is in this video . This is the next js demo next js demo https://stackblitz.com/edit/stackblitz-starters-48lpow?file=app%2Fpage.tsx if anyone knows please help. 2023-12-01-11-18-31-e6oi2ucb-yfwqujhp_7E7I5TX0.mp4 See the Pen wvNEjZo by unni-krishnan-the-vuer (@unni-krishnan-the-vuer) on CodePen Link to comment Share on other sites More sharing options...
unni Posted December 1, 2023 Author Share Posted December 1, 2023 Anyone please help if knows . Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 1, 2023 Share Posted December 1, 2023 Please be patient. We strive to answer all topics within a day, but this may take longer if it's busy in these free forums or the topic is especially complex. Link to comment Share on other sites More sharing options...
unni Posted December 1, 2023 Author Share Posted December 1, 2023 10 minutes ago, GSAP Helper said: Please be patient. We strive to answer all topics within a day, but this may take longer if it's busy in these free forums or the topic is especially complex. I wait Link to comment Share on other sites More sharing options...
Rodrigo Posted December 1, 2023 Share Posted December 1, 2023 Hi, The reason is not working is the timeout you have there. Any particular reason for that? Without the timeout the heading ScrollTrigger seems to work. Also the HTML and CSS in both demos are a bit different and so are the ScrollTrigger configurations, so each demo has a different setup, different ScrollTriggers, which leads to different results. So is not really clear to me if you want the Next demo to look like the codepen or the other way around. Any way this seems to work in the Stackblitz demo: useLayoutEffect(() => { let panels = gsap.utils.toArray('.panel'); let ctx = gsap.context(() => { panels.forEach((panel: any, i) => { ScrollTrigger.create({ trigger: panel, start: () => panel.offsetHeight < window.innerHeight ? 'top top' : 'bottom bottom', pin: true, pinSpacing: false, markers: true, id: 1, }); }); // setTimeout(() => { gsap.to('.project-heading', { scrollTrigger: { trigger: '.project-heading', pin: true, markers: { indent: 200 }, id: 2, start: 'bottom bottom', end: 'bottom center', pinSpacing: false, }, }); // }, 3000); }, []); return () => ctx.revert(); }, []); https://stackblitz.com/edit/stackblitz-starters-8jmcl9 Finally we have a new React tools, a custom useGSAP hook that aims to simplify the usage of GSAP in effect hooks, have a look at it: https://www.npmjs.com/package/@gsap/react Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
unni Posted December 2, 2023 Author Share Posted December 2, 2023 (edited) 7 hours ago, Rodrigo said: Hi, The reason is not working is the timeout you have there. Any particular reason for that? Without the timeout the heading ScrollTrigger seems to work. Also the HTML and CSS in both demos are a bit different and so are the ScrollTrigger configurations, so each demo has a different setup, different ScrollTriggers, which leads to different results. So is not really clear to me if you want the Next demo to look like the codepen or the other way around. Any way this seems to work in the Stackblitz demo: useLayoutEffect(() => { let panels = gsap.utils.toArray('.panel'); let ctx = gsap.context(() => { panels.forEach((panel: any, i) => { ScrollTrigger.create({ trigger: panel, start: () => panel.offsetHeight < window.innerHeight ? 'top top' : 'bottom bottom', pin: true, pinSpacing: false, markers: true, id: 1, }); }); // setTimeout(() => { gsap.to('.project-heading', { scrollTrigger: { trigger: '.project-heading', pin: true, markers: { indent: 200 }, id: 2, start: 'bottom bottom', end: 'bottom center', pinSpacing: false, }, }); // }, 3000); }, []); return () => ctx.revert(); }, []); https://stackblitz.com/edit/stackblitz-starters-8jmcl9 Finally we have a new React tools, a custom useGSAP hook that aims to simplify the usage of GSAP in effect hooks, have a look at it: https://www.npmjs.com/package/@gsap/react Hopefully this helps. Happy Tweening! but when i remove the setTimeout, i get gsap-core.js:92 GSAP target .project-heading not found. Element not found: .project-heading i changed to exactly like in your code but still. https://stackblitz.com/edit/stackblitz-starters-48lpow?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter Edited December 2, 2023 by unni Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 2, 2023 Solution Share Posted December 2, 2023 Are you trying to do this?: https://stackblitz.com/edit/stackblitz-starters-txuq4o?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter You've got a very complicated setup there actually. Notes: You defined the scope of the gsap.context() incorrectly (an Array instead of a valid ref or element) If you're going to pin something that's inside a container that you also pin, you must define the pinnedContainer If you're pinning something inside a pinned container, you'll probably need to use pinType: "transform" because if you have position: fixed inside of an element that has a transform applied (which is necessary for pinning that container), browsers make position: fixed relative to that container with the transform applied (it creates a new stacking context). That's not related to GSAP - it's just how the spec defines things. I believe Next.js renders things sometimes BEFORE the window/document exist, but those must exist in order to properly register the ScrollTrigger plugin, so make sure you call gsap.registerPlugin() after the window/document exist. So inside the useLayoutEffect() for example. I implemented the brand new useGSAP() hook from the @gsap/react package to make things easier. I hope that helps. 1 Link to comment Share on other sites More sharing options...
unni Posted December 3, 2023 Author Share Posted December 3, 2023 7 hours ago, GreenSock said: Are you trying to do this?: https://stackblitz.com/edit/stackblitz-starters-txuq4o?description=The React framework for production&file=app%2Fpage.tsx&title=Next.js Starter You've got a very complicated setup there actually. Notes: You defined the scope of the gsap.context() incorrectly (an Array instead of a valid ref or element) If you're going to pin something that's inside a container that you also pin, you must define the pinnedContainer If you're pinning something inside a pinned container, you'll probably need to use pinType: "transform" because if you have position: fixed inside of an element that has a transform applied (which is necessary for pinning that container), browsers make position: fixed relative to that container with the transform applied (it creates a new stacking context). That's not related to GSAP - it's just how the spec defines things. I believe Next.js renders things sometimes BEFORE the window/document exist, but those must exist in order to properly register the ScrollTrigger plugin, so make sure you call gsap.registerPlugin() after the window/document exist. So inside the useLayoutEffect() for example. I implemented the brand new useGSAP() hook from the @gsap/react package to make things easier. I hope that helps. very helpfull . and the useGSAP() hook is good. 1 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