SVG Rotation - svgOrigin inconsistent across browsers

[Loveurope Group LTD]

Hi,

Firstly many thanks for taking a look at my query. 

I am getting inconsistent behavior on rotation of my clip path. Chrome and Safari are behaving correctly, but Firefox seems to be acting very strange.

I would appriciate if someone could explain why.

Many thanks 🙂 

See the Pen xxmwbvj by Scieh (@Scieh) on CodePen

[Carl]

Thanks for the clear demo.

 

It appears that using transformOrigin:"50% 50%" works fine in FireFox

 

See the Pen oNJjXKg by snorkltv (@snorkltv) on CodePen

 

Being that things in the defs aren't actually rendered in the SVG I'm not so sure it's appropriate to apply svgOrigin to them.

 

I suspect someone from team @GreenSock will be able to provide a more thorough investigation and answer when time allows.

 

[Carl]

Upon further review it now seems that my demo above does not work as expected on iOS Safari. 

Please await the experts.

[Rodrigo]

@Carl,

 

How does this work on Safari?:

tl.to('#clipMask1', 2, {
  rotate: 90,
  svgOrigin: "256 256"
});

 

Thanks!

[Carl]

@Rodrigo that looks like the original code. oddly enough it's off a bit on desktop safari but fine on iOS 🤷‍♂️

[GreenSock]

Yep, a <clipPath> isn't a very browser-safe thing to animate, at least with certain properties like transformOrigin or svgOrigin because it's not a rendered thing and thus some browsers refuse to report width/height. Firefox literally gives you no way to determine the bounding box size - it doesn't even have getBBox() or getCTM() methods like all other SVG elements. Even the getBoundingClientRect() method returns 0 for width/height. 

 

A strong case could be made for Firefox and Safari's implementation having bugs. 

 

I've been looking for a few hours, trying to find some way to work around that but I haven't come up with anything yet. I'll keep looking.  

[Loveurope Group LTD]

Sorry just signing on again in the morning.  Thanks all so much for look into it.

Yeah its been driving me mad. 

I'll keep looking into it today and reply if i can find a solution.

[Loveurope Group LTD]

I'm still stumped.

Will later versions of GSAP assist with bridging the gap between the browers on animation of clip paths?

[GreenSock]

I've looked at this for hours, @Loveurope Group LTD and I just don't see any way to consistently work around it. Browsers have major bugs and inconsistencies when it comes to clip paths and transforms (unrelated to GSAP). Frustrating, I know!