Imran A Posted October 11, 2023 Share Posted October 11, 2023 Hello Everyone , Recently i have started using React with GSAP, i have been creating a react app and i was able to achieve the animations but resizing doesn't happen and the container inside gets resized only when the page gets a reload and below is my demo code that illustrates the problem Thanks in advance for help! https://stackblitz.com/edit/gsap-react-basic-f48716-oddg3v?file=src%2Fhome.js https://gsap-react-basic-f4871 See the Pen by (@) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 11, 2023 Solution Share Posted October 11, 2023 Hi @Imran A and welcome to the GSAP forums! The main reason for the issue is that you are not using GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() When working with React and React environments (Next, Gatsby, etc), always use GSAP Context. Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once. Here's the structure: // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background. Here is a fork of your demo: https://stackblitz.com/edit/gsap-react-basic-f48716-ztn5zt?file=src%2Fhome.js Finally I strongly suggest you to go through our GSAP & React resources to learn more about correctly using GSAP in React projects: https://gsap.com/resources/React/ Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Imran A Posted October 12, 2023 Author Share Posted October 12, 2023 Thank you so much for the quick reply , and also i will go through the best practices . One more thing, Do we have to use gsap.context() in every component ? Thank you Once again Link to comment Share on other sites More sharing options...
Rodrigo Posted October 12, 2023 Share Posted October 12, 2023 11 hours ago, Imran A said: One more thing, Do we have to use gsap.context() in every component ? If you have GSAP instances in them yes, use GSAP Context in all of them according to the guide we have in our Resources page. Happy Tweening! 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