Recreating Zentry’s Interactive Mask Animation with GSAP

[JecyNside]

I'm trying to recreate the animation from zentry.com, specifically the effect where an SVG clipPath deforms dynamically with the mouse movement. I already have GSAP working for rotations and 3D interactions, but I can’t find a clear way to animate the clipPath by updating the path’s coordinates (M, L, Q, etc.) in real time.

What I need is guidance on how to rebuild and replace the SVG path points using GSAP’s attr: { d: "" } to achieve that smooth, responsive deformation like Zentry’s effect. Any examples or references would be greatly appreciated.

[Rodrigo]

Hi @JecyNside and welcome to the GSAP Forums!

 

I think a combination of the MorphSVG path with the thread on masking created by @mvaneijgen could be a good start:

https://gsap.com/docs/v3/Plugins/MorphSVGPlugin

 

 

Finally this demo can help in this subject as well:

See the Pen myVvRyV by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[JecyNside]

Hola @Rodrigo sorry for the absence and thanks a lot for the documentation — it really helped me achieve the effect I have so far in the CodePen. The element is already reacting to the mouse, but I’m still missing that animation where the SVG or the path gets that 3D/perspective feel.
Could you please help me with that? Thanks a lot!

My link to CodePen: 

See the Pen MYyGNdJ by Jecy2305 (@Jecy2305) on CodePen.