Pin section problem in react

[akrdesign]

I am trying to pin section when section reached top of the window in react but it's doesn't works! but also use same logic for html file it's works. Please help me find out my it's not working in react.

react file link :-https://codesandbox.io/s/pin-using-gsap-in-react-imqkh9?file=/src/App.js:358-376

html file link: - https://codesandbox.io/s/cranky-darkness-le0ic1?file=/app.js

[GreenSock]

It looks like you weren't doing proper cleanup in React (React 18+ calls useEffect() TWICE in strict mode, so you'd be creating multiple ScrollTriggers, some of which may be applying to elements that no longer exist because React trashed them). So gsap.context() is your best friend in React - it makes cleanup super easy, plus scoping selector text too: 

https://codesandbox.io/s/pin-using-gsap-in-react-forked-m5ku4c?file=/src/App.js

 

I'd highly recommend reading this article: 

Happy tweening!