Jump to content


How to target multiple React components with same animation

Moderator Tag
Go to solution Solved by Trapti,

Recommended Posts



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

Link to comment
Share on other sites

  • Solution


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. 

  • Like 2
Link to comment
Share on other sites

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

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