Jump to content
Search Community

usage of useRef() hook via GSAP

azadsarxanli test
Moderator Tag

Recommended Posts

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? 

 

Link to comment
Share on other sites

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 });
}

 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...