How to target multiple React components with same animation

[noahtrotman]

Hi,

 

I've been trying to target multiple components for the last couple days and can't get it to work. I've tried an array of refs but that caused and error of undefined (_gsap) and then read the react gsap article and it suggested to use React Context. I can't seem to get that to work either and I am unsure what I am doing wrong. I just keep getting gsap target not found. I've simplified my work in a demo with just 4 boxes, with the hopes that all 4 boxes animate at the same time. All help would be greatly appreciated. 

 

Sandbox: https://codesandbox.io/s/target-multiple-componets-react-gsap-0fw4z5?file=/components/Viewport.js:558-566

[Trapti]

Hi, 

In the project style components is being used, which changes the class names to some random string. And in the code target class is .boxes so GSAP could not find that class name. Check the browser console it gives the warning.

 

Below forked codesandbox of yours but without styleComponents. If you can figure out how to configure style components to not convert certain class it will work. Sorry I don't have in depth knowledge in that. 
https://codesandbox.io/s/target-multiple-componets-react-gsap-forked-1f9656?file=/components/ColoredBox.js 

[noahtrotman]

Hi Trapti,

 

Thank you, your response helped me see what was wrong. I was originally passing the classname to the component thinking it would work with the context provider. All I needed to do was pass the boxClass classname through props to the child component and it works! I've updated the sandbox with the corresponding changes. Hope you have an amazing day!!