How can I achieve this effect?

[saad_shah]

I have attached the preview. I want to have an animated morph guided by the mouse with text inside masked to a series of images in the background. On mouse move, I'll show/hide images(frames) in the background to give the effect of a video playing in the background.  
Is this even possible with GSAP?

 

 

[SteveS]

I think it should be possible to have a clip-path that is moved by the mouse, but its difficult to intepret exactly what effect you are looking to emulate based off only the two images you provided.

[Rodrigo]

Hi @saad_shah and welcome to the GreenSock forums!

 

Maybe these threads can provide a solid starting point:

 

 

Hopefully this helps.

Happy Tweening!

[saad_shah]

@SteveS Here is a Figma prototype link to demonstrate the concept.

CLICK AND DRAG Or SCROLLin the proto. I want to do the same but with mouse move
https://www.figma.com/proto/5NyEPgZEAy5mTiQdZ8BAU6/demo?page-id=0%3A1&type=design&node-id=0-3&viewport=1147%2C799%2C1.91&t=e8qnQVG83H3d3l2Q-1&scaling=min-zoom&mode=design

[SteveS]

If you only need the mask to drag then it is fairly simple. I recommend using the GSAP draggable plugin if you can. A custom drag implementation shouldn't be too problematic, but it's more legwork.

If you do want morphing, Rodrigo posted some good resources on how to achieve that effect as well using MorphSVG. As long as I'm understanding the desired effect, it should all be possible with GSAP.