usage of useRef() hook via GSAP

[azadsarxanli 6 Likes (Newbie)]

Hi! I want to do very simple animation via GSAP. 

I've read userRef() article, for now it doesn't contain what I'm looking for.

https://codesandbox.io/s/clever-kare-1678uo?file=/src/App.js:321-323

It works only once, then if you click again, `CONSOLE.LOG()` output is: GSAP target .false not found.

despite, there is `.true` and `.false`. Any idea about solving that issue? 

 

[OSUblake 18,475 Likes (Superhero)]

Sounds like some logic issues. First of all, this will never be true as you are comparing 2 different types, string vs boolean.

 

if (refEffect.current.className === anim) {
  gsap.to(".true", 0.8, { opacity: 0.4 });
}

 

But even if you converted anim to a string like String(anim), your logic would still be messed up. You would need to do something like this.

if (refEffect.current.className === "true") {
      gsap.to(".true", 0.8, { opacity: 0.4 });
    } else {
      gsap.to(".false", 0.8, { opacity: 1, background: "red" });
    }

 

But that's still messy. I don't understand why you are trying to use class names here. Just use the ref.

if (anim) {
  gsap.to(refEffect.current, { opacity: 0.4, duration: 0.8 });
} else {
  gsap.to(refEffect.current, { opacity: 1, background: "red", duration: 0.8 });
}

 

[azadsarxanli 6 Likes (Newbie)]

Hi, OSUblake! I  use className, cuz it must be dynamic. I mean, it comes from me server. In my real project actually, it comes as <element className="square randomColor" /> 

 

When I'm trying to do that, it only affects to last one. if you do not mind, please, check the link. 

https://codesandbox.io/s/still-cdn-wdv0s7?file=/src/App.js

 

[OSUblake 18,475 Likes (Superhero)]

You can't use useRef like that with map as the ref will always be the last element.

 

Can you explain in detail what are you trying to achieve here? Thanks!

[azadsarxanli 6 Likes (Newbie)]

simply, I want to do, when element triggered, GSAP must work. For example, if I click first element, gsap should aplly some properties (such as, backgroundColor, or width && height), then when second (or another one) triggered, first element's gsap (or which click happened first) must aplly the new one. So basically, I want to create basic toggle. I've solved it actually with CSS, but my professor wants it via GSAP. It's going frustrating...

[OSUblake 18,475 Likes (Superhero)]

You have a bunch of logic issues that are completely unrelated to GSAP, those are React issues, like with useRef.

 

Can you show me the CSS version that works like you expect?

 

[azadsarxanli 6 Likes (Newbie)]

Sure! This code works fine. 

https://codesandbox.io/s/dreamy-lehmann-e8gupy?file=/src/App.js

[OSUblake 18,475 Likes (Superhero)]

Thanks, that makes it clearer what you're trying to do. I'll get back to you later tonight with some solutions.

 

[OSUblake 18,475 Likes (Superhero)]

Actually, here's a quickie version just using what you already have in place. Just listen for the api to change and then animate your true and false classes.

 

One issue to be aware of when animating GSAP is to make sure you don't have CSS transitions on the same properties GSAP is animating. For example, using all is just going to cause problems with GSAP.

 

transition: all 400ms ease;

 

https://codesandbox.io/s/youthful-monad-i0g9yn?file=/src/App.js