Jump to content
Search Community

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

rory test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

  • Like 2
Link to comment
Share on other sites

  • 7 months later...

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.

Link to comment
Share on other sites

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



:)

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

:)

Link to comment
Share on other sites

  • 1 month later...

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 :-)

  • Like 1
Link to comment
Share on other sites

  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...