useGSAP - React with multiple states

[newguy123]

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

[alig01]

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.

[GreenSock]

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. 

[Rodrigo]

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!

[newguy123]

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

[newguy123]

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

 

[Rodrigo]

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:

1. 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

2. 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!