akrdesign Posted December 12, 2022 Share Posted December 12, 2022 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 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted December 12, 2022 Solution Share Posted December 12, 2022 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! 2 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