Jump to content
Search Community

I can't get the gsap pin working properly in react

Semih test
Moderator Tag

Recommended Posts

Hi @Semih and welcome to the GreenSock forums!


I'm not sure I follow exactly what the issue is here. In your demo everything seems to be working as expected, based on the code you're providing. You mention React but there is no React code in your example, you could fork this starter template in order to create your demo in React:



Also I strongly recommend you to check the resources in this page:


Finally when using GSAP in React environments we recommend using GSAP Context always as it saves you from a lot of troubles:



Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

4 hours ago, Rodrigo said:

Hi @Rodrigo I'm quite new to using gsap and probably the error occurs because I don't know how to use it in react. Here I created the demo react project for you, this is how the error occurs. I couldn't figure it out. https://stackblitz.com/edit/react-py27ab?file=src%2FApp.js .. And actually the animation I want to make is in the services section of this site https://marsankrom.com/hakkimizda/. I would be very happy if you could help me




Link to comment
Share on other sites

It looks like you're using React and you didn't do proper cleanup which is critical in React. As of React 18, it double-invokes your useEffect()/useLayoutEffect() which is super annoying because it causes people to inadvertently create DUPLICATE (conflicting) animations/ScrollTriggers. That's why we created gsap.context() - it makes cleanup super easy. That was explained in the article @Rodrigo asked you to read. 




Does that help? 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...