Animated Mask

[CarpeDiem]

I am trying to take a png, or it could be an svg shape, see attached.

 

I want this png to serve as a mask so that when it is rotated the image beneath it is being revealed.  I used to do this all the time in flash and am not sure how to proceed in html5.  any help will be greatly appreciated

[PointC]

Hi CarpeDiem 

 

You can use that shape as a mask or a clip-path. Here's a pen I made a while back to demonstrate basic usage of a mask in SVGs.

 

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

 

That should get you started in the right direction. 

 

Happy tweening.

[Jonathan]

And to add to Mr PointC's great advice, here is another example that animates the SVG element and the mask separately

 

See the Pen OyarJK by jonathan (@jonathan) on CodePen

 

They both use the GSAP AttrPlugin

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/