(Gsap with react) multiple instances of button component triggers animation simultaneously on interaction with any one of the button instance.

[Ritik]

As you can observe in the code pen link, both the instances get triggered on interacting with any one of them.
What concept am I missing? I guess this is because both button instances share the same ref. I am unsure. What is the gsap way of doing this?
I read gsap context, This gsap thread, and gsap with react basics
But I am still confused.
 

See the Pen wvQmvey by iamnimonic (@iamnimonic) on CodePen

[Cassie]

Hiya, one important thing to note is that you definitely shouldn't have multiple occurrences of the same ID in one web document. Not a react thing, just a core web standard.

 

You say you've read the react guide and the page on context but you're not using refs or context here. So maybe give them a once over again and try and implement that.

 

If you're still struggling by monday I'll take a look and rewrite it for you, I don't have time this weekend I'm afraid - but in the interim take a look at this section on context, selectors and scope. Good luck, I'll check in on you on monday if no one else jumps in.
 

https://greensock.com/react-basics#scope

 

[Cassie]

Maybe something like this?

See the Pen yLQKwbx?editors=0011 by GreenSock (@GreenSock) on CodePen