newguy123 Posted December 11, 2023 Share Posted December 11, 2023 Hi Guys I'm following on from another user's thread, that had a similar issue. However my example has MULTIPLE states, and not just 1 like that user. Essentially what I'n trying to do: The page starts with a welcome, then you click. A new set of divs should come up, opacity 0% and fade to 100%. When you click again, these divs go away, and the next set should appear, fading also from 0 to 100 etc. I dont think I'm using the useGSAP correctly, as clearly it is not working currently. In my stackblitz editor I cant see the error, however in my local dev the error is: Here is the stackblitz demo, and I have the mainContainer set to 0% opacity in the css, but if set this to 100% and comment out the various useGSAP hooks, you can see that clicking successfully hides and unhides the various sets of divs. Anyway, herewith my simplified stackblitz demo: https://stackblitz.com/edit/gsap-react-basic-f48716-b4dnwv?file=src%2FApp.js Link to comment Share on other sites More sharing options...
alig01 Posted December 11, 2023 Share Posted December 11, 2023 Hey, you mixed up the order (in v1.0.0). useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container}); // config object offers maximum flexibility useGSAP(() => { if (!article1) return; gsap.to('.mainContainer', { duration: 1, opacity: 1, }); }, { dependencies: [article1], scope: container1 }); How did you notice the package, was it announced somewhere? Hope this helps and good luck with your project. Link to comment Share on other sites More sharing options...
GreenSock Posted December 11, 2023 Share Posted December 11, 2023 Make sure you're using the latest version, 2.x - we updated the API to make it more flexible and intuitive. Sorry about any confusion there - I bet you were using version 1.x of the hook. 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 12, 2023 Share Posted December 12, 2023 Hi, You are passing as a scope the same element you are animating here: useGSAP( () => { if (!article1) return; // At this point active is truthy so we can run our code safely gsap.to('.mainContainer', { duration: 1, opacity: 1, }); }, { scope: container1, dependencies: [article1], } ); {article1 && ( <div className="mainContainer" ref={container1} onClick={() => { setArticle1(!article1); setArticle2(!article2); }} > <div> <h3>This is Navpoint1</h3> <div>(tap or click)</div> </div> </div> )} Just remove the scope, update to the latest version of the useGSAP hook and this should work the way you intend. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
newguy123 Posted December 12, 2023 Author Share Posted December 12, 2023 12 hours ago, alig01 said: ..... How did you notice the package, was it announced somewhere? .... I saw it mentioned a few times here on the forum. Its pretty close to official launch from the sounds of it 1 Link to comment Share on other sites More sharing options...
newguy123 Posted December 12, 2023 Author Share Posted December 12, 2023 I updated to version2 of useGSAP as per Jack and Rodrigo and I removed the scope as suggested. Things then work as expected so thanks both. However, taking it a step further then, In my actual app there's various other things that happen between the navpoints. To simulate this I added a 3 second sleep function between switching from the one navpoint to the next. So when the NEXT navpoint comes in, it fades in beautifully with opacity 0 to 1. However, how can I do the reverse for the outgoing navpoint? Currently I just abrubtly kill it by switching the state to false which hides the current navpoint divs, but before it gets to false, I want to reverse the animation so it fades out, then my other stuff happen, as simulated by the 3 second delay, and then the next navpoint comes in. So the coming in part works great. But I'm not sure how to get it to fade out without adding yet another state inside that set of divs and keep switching a state which is called for example setNowWeAreFadingOut to true and false. Any ideas? Stackblitz V2 with the fading in, and sleeping for 3 secs: https://stackblitz.com/edit/gsap-react-basic-f48716-qub4gn?file=src%2FApp.js Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted December 12, 2023 Solution Share Posted December 12, 2023 Hi, Yeah the issue is that as soon as you toggle your state properties the conditional rendering is falsy so the elements are removed immediately from the DOM. This is more about the logic involved in handling moun/unmount animations rather than a GSAP issue. There are two ways to solve this: Handle all the logic by yourself using two state properties, one to control the animation and another to control the rendering, kind of similar to this demo: See the Pen VwbXyON by GreenSock (@GreenSock) on CodePen Use React Transition Group so it takes care of everything for you: https://stackblitz.com/edit/vitejs-vite-vlpbvk?file=src%2FModal.jsx Hopefully this helps. Happy Tweening! 1 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