Semih Posted September 11 Share Posted September 11 Hello, I animate using image pinning and movement within the image, but I am having a problem when trying to use it in my React js project. When I move the scroll to the start-pin, the picture goes directly to the end. I couldn't solve this problem. Could you please help? See the Pen OJrmXYr by semhzdmr (@semhzdmr) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 11 Share Posted September 11 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: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters 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: https://greensock.com/docs/v3/GSAP/gsap.context() Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Semih Posted September 12 Author Share Posted September 12 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 More sharing options...
GreenSock Posted September 12 Share Posted September 12 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. https://stackblitz.com/edit/react-a881rw?file=src%2FApp.js Does that help? 1 Link to comment Share on other sites More sharing options...
Semih Posted September 15 Author Share Posted September 15 On 9/12/2023 at 4:36 AM, GreenSock said: Thank you man. I solved problem 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