play() gsap animationon mouseEnter React

[idsintehittapa]

Hello!

 

Nice to meet you all, I am new to this forum. I started using gsap after taking a workshop with Cassie a while back 😀

 

I am trying to align my css hover animation with my gsap animation. I am using gsap.context to handle my (soon to be) timeline and take benefit of revert(). I.e. I want the little IKEA person to start it's animation when the user hover the IKEA word and the css hover is rendered. I understand that I somewhere have to add play() to a pointerEvent, but I've failed to understand where to put this. 

I've searched through the forum and googled but I haven't find anything that align fully with what I am trying to do. Or, simply I don't completely understand how to do it 😅

See the Pen ExRdOyM by idsintehittapa (@idsintehittapa) on CodePen

[Rodrigo]

Hi @idsintehittapa and welcome to the GreenSock forums!

 

1 hour ago, idsintehittapa said:

I started using gsap after taking a workshop with Cassie a while back 😀

@Cassie is going to be thrilled to hear this 💚

 

We have this Getting Started with react guide that should prove quite helpful:

https://greensock.com/react

 

There are two ways to handle this and in both is recommended to store the GSAP instance in a ref. One is to just use a mouse enter/leave handlers to play/pause the tween. The second one is to use state to update a boolean and a useEffect hook to play/pause the tween. Depending on how you have set up your app the best option for this. I'd try the first one if your component doesn't have any other state property in it.

 

Let us know if you have more questions.

 

Happy Tweening!