Hover animation need to rotate slightly with mouse move

[Pathirana]

When hover the text from left to right need to rotate image slightly with mouse position.
Currently it moves horizontally.
Any Suggestions for this.

Effect same as the work section in this link - https://thefluid.webflow.io/

See the Pen GRGEraY by pramith (@pramith) on CodePen

[Pathirana]

Effect same as the work section in this link - https://thefluid.webflow.io/

[Rodrigo]

Hi @Pathirana and welcome to the GreenSock forums!

 

What you can do is check the mouse position in the X axis and create a GSAP animation for each image that rotates the image from a starting angle to an end angle. Then you can control that animation's progress using the mouse position value.

 

Here is a simple example illustrating that:

See the Pen jOKLNLG by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!