Clipping paths

[dj_coder]

New to html5, coming from actionscript.... I need to figure out how to hand-code animated clipping paths that work across browsers. I did a rect and a circle path so far, which animated in Chrome to reveal a pic, but the circle did not work in Firefox. How do I animate a circle clipping path, and a poly clipping path for that matter? I found an example of an animated poly clipping path, but could not reproduce it. Can the circle be done with Greensock or do I have to us CSS animations (whole new area for me...).

 

Hoping for an example I can copy and paste into an html file.

[ohem]

SVG clipping is better supported across more browsers than CSS clipping.  Check out these demos:

http://sarasoueidan.com/blog/css-svg-clipping/

See the Pen fsdbu by yoksel (@yoksel) on CodePen

 

Also:

http://caniuse.com/#feat=css-masks

http://caniuse.com/#feat=css-clip-path

 

I miss how easy it was to have consistent masking in Flash; cross browser compatibility issues are now the bane of my existence.  I think newer browsers are getting a lot better at supporting more of the same features though!