useGSAP hook cleanup does not appear to be working with scroll trigger

[Nightshift]

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",
      },
    });
  }, []);

[Rodrigo]

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!

[GreenSock]

One other guess: make sure you register the useGSAP hook and ScrollTrigger: 

gsap.registerPlugin(useGSAP, ScrollTrigger);

 

[Nightshift]

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!