Animating SVG Masks (clip-path) not working in FireFox

[rory 2 Likes (Newbie)]

Hi, 

 

I'm creating a simple polygon svg shape, and using it to mask an image using the clip-path:url(#id) method. I'm then trying to animate this using GSAP. This works fine, except in FireFox, where no animation occurs. This can be viewed at this codepen: . All I'm trying to animate is simple 2D transforms like x and scale. 

 

I know FireFox has some issues with clip-path, so I tried animating the same shape, when it is not used as a mask, and that works fine in FireFox. So the issue is something to do with animating the svg when it is assigned to clip-path.

 

I tried another example using GSAPs AttrPlugin, which does work in all browsers including FireFox. Codepen here: 

See the Pen MwMbVx by rorytawn (@rorytawn) on CodePen

. But as far as I'm aware, this won't allow me to animate using css features, rotation, skew etc.

 

If anyone can please point me in the right direction to get the first example to work in FireFox it would be much appreciated!

 

Many thanks!

 

 

 

 

See the Pen OVeWNB by rorytawn (@rorytawn) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi rory 

 

Firefox has some known issues with SVG masking/clipping .

 

pls check this thread: http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/

[Jonathan 5,176 Likes (Superhero)]

Here are 2 bug reports, but looks like Mozilla is not rushing to fix this bug.

 

https://bugzilla.mozilla.org/show_bug.cgi?id=1178297

https://bugzilla.mozilla.org/show_bug.cgi?id=1118710

 

But this only affects when animating clipping paths using CSS in Firefox, hopefully they will soon jump on the gravy train and fix this.

[kgrote 2 Likes (Newbie)]

I'm getting buggy behavior with clipPath transforms in Edge also. Specifically trying to use scale on a polygon clipPath, Edge can't seem to render the animation - the end position will suddenly appear if you click the SVG canvas. It doesn't seem to be exclusive to polygon, though, as I had the same experience with rectangle (rectangle actually gave me similarly buggy behavior in Chrome also). X and Y position transforms seem to work fine.

 

All and all, support for transforming clipPath seems to be pretty crappy at the moment.

 

UPDATE: Figured out the issue, see comment below.

[Jonathan 5,176 Likes (Superhero)]

Hello kgrote, do you have a live codepen example?

From what I see css clip-path is not supported yet in MS Edge.

http://caniuse.com/#search=clipPath

Also make sure your SVG clipPath element is not wrapped in a SVG <defs> element. If so animating the transform attribute won't work since elements within a <defs> element are not directly rendered with CSS. So you would have to animate the svg <clipPath> attributes instead.

 

For example using the GSAP AttrPlugin by wrapping your vars properties in your tweens with attr:{}

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

And here is animating an SVG element that uses a svg <clipPath> via a CSS clip-path URL identifier with GSAP:

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

[kgrote 2 Likes (Newbie)]

Hey Jonathan!

 

I was just about to post that I figured out the reason I was getting buggy behavior is because I was targeting the <clipPath> element with GSAP instead of the <path> element inside the <clipPath>. Works like a charm in Webkit & Edge, but obviously still not FF because of the above mentioned clipPath transform bug, which I can live with.

 

Here's a codepen so you can see my handywork: 

See the Pen VaXzXb by kgrote (@kgrote) on CodePen

[Jonathan 5,176 Likes (Superhero)]

That is not a transform bug in Firefox. Firefox is honoring the svg spec in this regard. Your trying to animate CSS transform values on an element that is within a <defs> element. Firefox follows the SVG spec regarding this, whereas WebKit based browsers allow it and go against the SVG spec. The svg spec states that you can not directly render graphical elements within a <defs> or <symbol> element.

 

So in order to get around this and have true cross browser compatibility that follows the SVG spec. You need to animate the SVG attributes of the <path> element that is within the <defs> element with the GSAP AttrPlugin.

 

Right now your using the CSSPlugin to animate x and y (translated and translateY). To use the AttrPlugin you need to wrap your vars with attr:{} and animate the x and y attributes instead.

 

[kgrote 2 Likes (Newbie)]

Good info, thanks Jonathan.

 

UPDATE: Here's the same pen using the Attr plugin - works in all browsers! Yay! 

See the Pen mPxzZY by kgrote (@kgrote) on CodePen

[Beingenious 1 Likes (Newbie)]

Hey,

 

That could be cool to have some helpers from morphSVG to scale and translate directly the path values. It can honor the svg spec and be cross browser compliant.

TweenLite.to("#square", 1, {morphSVG:{x: -100, scaleY:0.5}});

Please Jack, make my dreams come true again