Transform-origin for SVGs doesn't work on some browsers?

[Acccent]

Hi everyone

 

If you've been following my threads: this is the last bit of animation that I need to do, the thing that I picked GSAP for... animating SVGs. Up until earlier today I was having trouble implementing this, but... it was totally my fault, some sort of typo among the variable declarations messed it all up. Whoops...

 

Anyway, I fixed that and got the animation to work in Chrome just like it did before I moved to GSAP! So I switched over to FF where it was having issues, and... well the same issues are still here?

 

It seems you can't change the transform-origin of masks in Firefox (or IE, for that matter)?

 

Check out the (fun) pen I made to illustrate the issue. It works perfectly in Chrome, and when you open it in FF you see that the transformOrigin var isn't working.

 

Ideas on how to fix this...?

See the Pen yYPJOL by Acccent (@Acccent) on CodePen

[GreenSock]

There are certain things in SVG that various browsers simply don't support properly and there's very little we can do about that. <use> elements are particularly buggy - as you discovered, you cannot animate something in the <defs> and expect it to render properly. That has nothing to do with GSAP at all. I wish I had better news for you. I'm actually not even sure the spec says that sort of thing is supposed to work.

 

I think you'll find that GSAP is by far the leader when it comes to smoothing out SVG animation quirks across browsers, particularly when it comes to transforms, but unfortunately it's not a magic bullet that solves every browser problem. If you know of another tool that made what you're attempting work, please do let us know and we'll analyze the technique. 

[Acccent]

Oh, no, I'm not suggesting it's GSAP's fault at all, sorry if that's how I came off. Like I've said elsewhere, I know it's a very powerful platform and I trust it to do everything it does as well as it can. But I was just wondering if someone might know of an different way to achieve a similar result... Would clip-paths work, for instance?

 

edit: in any case, it might be a good idea to mention this sort of caveat in articles like this one, to prevent people like me from finding out about them too late

[Jonathan]

Hello Accent and funny crazy eyes smiley face

 

The best thing to due is have a look at the SVG spec and its elements. Even though SVG has been around awhile, browsers are just now supporting certain things.

 

A good website to look up specific SVG elements and attributes is on the Mozilla Developer Network. There you will find various spec information on various web elements and their expected behavior. Mozilla is pretty good at compiling this spec information, unlike Google or Apple. 

 

For example the <defs> tag in SVG, according to the spec is only a referenced tag that is not directly rendered. Taken from the spec:

 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

• SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

Sometimes straight CSS wont work on elements inside a <defs> tag or <use> tag. In that case use the GSAP AttrPlugin which will help you animate attributes of those tags directly. In your example when you are trying to animate the rotation, in GSAP you are using the GSAP CSSPlugin to animate CSS properties, using  the style attribute of the tag. The GSAP AttrPlugin helps bridge the gap for animating attributes on tags, and is very useful for SVG elements.

 

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

 

Here are some codpen examples that animate SVG filters using the GSAP AttrPlugin:

• SVG feDisplacementMap & feTurbulence element example:

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

• SVG Filter: Gaussian Blur example:

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

• SVG Color Matrix Filter: Tint example:

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

Sometimes its best to also just treat your SVG elements like images, and just wrap them with a <div> tag and animate the div directly like you were doing.

 

This is due to the browser issues Jack mentioned above and how some SVG elements can not be directly animated with CSS, but can have their attributes animated instead. As well as some SVG elements just being a reference element that are not directly rendered by the browser. So i would just as a rule of thumb is look at the SVG spec of the elements your trying to animate, and take note that GSAP can only do what the spec and various browsers will allow.

 

Reference:

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

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

SVG Tag Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element

SVG Documentation: https://developer.mozilla.org/en-US/docs/Web/SVG

SVG <use> tag: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

SVG <defs> tag: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

 

[Acccent]

Thanks for the great answer, Jonathan! I knew about <defs> and <use> but I'll have a closer look at the spec to see what's possible. Maybe I can achieve the same effect by animating a filter. I'll let you know. Thanks again The Greensock community has been super helpful and welcoming!

[GreenSock]

Yeah, we've got some great people involved over here. As I'm sure you've seen, Jonathan and Diaco are two of the best.

 

Nice to hear you feel welcome around here (and you are of course). Let us know if you find any great solutions with that particular SVG/browser issue.