scrolltrigger PIN issue in react

[chinnmay]

hello everyone, i am having trouble with scrolltrigger pin method.  i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js

 

See the Pen App.js by s (@s) on CodePen

[akapowl]

 

Hello @chinnmay

 

That appears to be a problem with React's StrictMode and how it handles things from React 18.0 on.

 

You should definitely check out gsap.context(), which was added in GSAP 3.11 

 

There is a demo for use with React on the very bottom of that docs page

https://greensock.com/docs/v3/GSAP/gsap.context()#react

 

 

 

This is your example working with that.

 

https://codesandbox.io/s/nice-darwin-bp35ve

 

 

 

And if you want to read more about how and why the StrictMode in React 18 makes things problematic, check out this thread.
 

 

 

 

 

[Mahmoud Ibn Samy]

Thanks @akapowl , your comment solved an issue I was facing for the last two days 🎉

[karnan]

@akapowl Thanks man. That was a huge help. Now when I try to deploy it to vercel, ScrollTrigger is not working. Do you have any idea how can I overcome this. 

[akapowl]

 

Welcome to the GSAP Forum, karnan.

 

Your question really sounds like it is not related to this topic, so please create a new thread for your request.

As a little hint upfront:

There are endless possibilities for what could have gone wrong for you, so you'll likely need to provide some more information than you just did here, for somebody to be able to help you.

In the meantime you can trawl the forum to see if maybe there already is a thread that can help you out with your problem.
 

These here are the most recent search results with regard to vercel.

 

https://greensock.com/search/?q=vercel&quick=1&type=forums_topic&nodes=11