Masking/Clipping on tweening svg paths

[Vinay Raj]

Hi, I am trying to apply a mask/clip path on the wings so that when the wings are moving, the portion of the wings that go behind the hair, ears and bottom of the boy's body is masked and cannot be seen. If I apply the same mask /clippath to an svg path which has no gsap tweening (such as the boy's body), it works fine but when applying to svg paths such as wings that tween, I see that the mask is not applied at all / not applied properly. I have shown the masking area in grey for reference.  When wings move out of the grey area, they must not be visible. Unable to find any solution. Appreciate any help! 

 

 

See the Pen WbQBQKq by kvtqecwj-the-reactor (@kvtqecwj-the-reactor) on CodePen.

[GreenSock]

You were applying a clip-path to the wrong thing - I think you meant to wrap your elements in a <g> that has it applied so that the wings can move inside the masked element. Otherwise, you're just moving the pixels that are already clipped. 

 

I increased the angle of the wings so you can more clearly see the clipping - is this what you're looking for?: 

 

See the Pen dPYEGPj?editors=1010 by GreenSock (@GreenSock) on CodePen.

[Vinay Raj]

Thank you for the prompt response. Yes this is exactly what I am looking for. I dont fully understand why defining the clip path in a <g> solves the issue but yes glad it works. Thank you very much!

[GreenSock]

15 hours ago, Vinay Raj said:

Thank you for the prompt response. Yes this is exactly what I am looking for. I dont fully understand why defining the clip path in a <g> solves the issue but yes glad it works. Thank you very much!

Think of it as if the element you're clipping gets clipped FIRST and then you're just moving those clipped pixels around (as if that's the entire element - the clipped pixels). But what you're actually wanting is for the PARENT to get clipped so that the elements inside the clipped parent can move around inside the clipped container.