Gsap + React ".App" not found

[Adan Rodriguez]

I'm trying to get started using Gsap + React. I'm running into the issue of Gsap not finding the targeted ref. 
What am I doing wrong? 

Thanks!! 

 

See the Pen jOKrEWX?editors=0011 by AdanRod133 (@AdanRod133) on CodePen

[GreenSock]

Hey @Adan Rodriguez. First of all, good job using gsap.context() - it's super helpful in React. The problem in your demo is that you defined the scope for the gsap.context() to be your app Reference which basically means "make all selector text only look for descendants of the app element"...but your tween is actually targeting the app element itself! So it's sorta like doing this: 

let app = document.querySelector(".App"); 

gsap.to( app.querySelectorAll(".App"), {...}); // there's no target!

See what I mean? 

 

So you can either remove that scope parameter from the gsap.context() (probably not the best idea since then you'd have no scope and it'd use document.querySelectorAll() and find ALL elements with ".App" which in this case is fine but if you have multiple instances of the same component in your page, it'd find all of them), or just reference it directly for that particular tween like this: 

gsap.fromTo(app.current, {...}, {...});

See the Pen NWzrPBm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

[Adan Rodriguez]

Hey @Jack! Thank you for the explanation. I have some studying to do. Let me see if I can explain what I think you are saying. So when I define a scope for gsap.context(); Im saying “look for all selector text that are descendants  of this reference” 

 

but then I’m selecting the Reference itself. Which cannot be a descendant of itself. Is that correct? 
 

So then following that logic, if I would have selected “.logo” WHICH IS a descendant of the app reference, then it would work correctly? 
 

 

 

 

[GreenSock]

You got it exactly right, yes. 👍