Dragable and image clip

[Sagi Karni]

Hi , 

I would approciate if you could help with the following scenario.

I would like yo use a dragable object (lets assume a rectangle ) on top of an image (or any div with a background image) which is completely hidden exept

the arae inside this dragable object (e.g. "Drag me"). The drag expirience should be as the following codepen demo

The attached image illustrate how the image looks like and how it should look like when the only part that is not hidden is the dragable object area.

 

Thanks

Sagi

 

 

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

 

 

 

[Sahil]

Here is how you can do it, but there are some limitations to clip property. Your image must be positioned absolutely, otherwise you will need to use canvas.

 

See the Pen paMRXZ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[PointC]

Hi @Sagi Karni

 

Welcome to the forum. 

 

If I understand your question correctly, you want the draggable element to reveal just a small section of the underlying image? If it were me, I'd use a SVG so it scales nicely and then use a clip-path. Something like this maybe:

 

See the Pen eVqgyj by PointC (@PointC) on CodePen

 

I used a second copy of the image with a 25% opacity just so it's easier to see what's happening. Hopefully that helps. Happy tweening.

 

 

 

[Carl]

Great demos @Sahil and @PointC

[Sagi Karni]

Exactly what I was needed,.

Thanks !!!