Nightshift Posted May 16 Share Posted May 16 I'm using the new useGSAP hook with gsap + scroll trigger. When I use the hook, my scrolltrigger pinned section seems to disappear. When I use the original way (using useIsomorphicLayoutEffect with GSAP Context) it seems to work exactly as expected. Im using packages: - GSAP business - useGSAP version 2.1.1. - React version 18.3.1 - React DOM version 18.3.1 Unfortunatley when I create a minimal demo, both methods work fine Is there something I should be looking for, or am i not using the hook correctly? See video here for example => https://vimeo.com/947131601?share=copy // this works useIsomorphicLayoutEffect(() => { const ctx = gsap.context(() => { gsap.to("#voting", { scrollTrigger: { trigger: "#voting", pin: "#voting", start: "top top", end: "bottom top", }, }); }); return () => ctx.revert(); }, []); // this does not work useGSAP(() => { gsap.to("#voting", { scrollTrigger: { trigger: "#voting", pin: "#voting", start: "top top", end: "bottom top", }, }); }, []); Link to comment Share on other sites More sharing options...
Rodrigo Posted May 16 Share Posted May 16 Hi, The video link is going 404, so there is nothing to see there. The only thing is that something else is creating an issue, unfortunately without a minimal demo that clearly illustrates the issue is really hard for us to find the problem. On top of that I strongly recommend you to not animate the same element you're using as a trigger and pin on ScrollTrigger: gsap.to("#voting", { scrollTrigger: { trigger: "#voting", pin: "#voting", start: "top top", end: "bottom top", }, }); Here you can find our React and Next collections in Stackblitz: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Solution GreenSock Posted May 16 Solution Share Posted May 16 One other guess: make sure you register the useGSAP hook and ScrollTrigger: gsap.registerPlugin(useGSAP, ScrollTrigger); 1 Link to comment Share on other sites More sharing options...
Nightshift Posted May 21 Author Share Posted May 21 On 5/16/2024 at 6:43 PM, GreenSock said: One other guess: make sure you register the useGSAP hook and ScrollTrigger: gsap.registerPlugin(useGSAP, ScrollTrigger); I think this may have been the issue. It's weird because I've used the useGSAP hook before without registering it as a plugin. I also did not see anywhere in the useGSAP doc's that it needs to be registered. Thanks! 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