Jump to content
Search Community

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

Ritik test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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.



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