Guido

SVG Rotation bug(?) - Apple specific

Recommended Posts

Hello,

 

I've got a litle problem when trying to change/set the rotation of a svg on Apple devices.

As you can see in the codepen I've set the rotation of `#progress` to -90 which should set the starting point at the top.

 

Somehow the Apple devices don't seem to respect the rotation because it jumps right back to the default value when I try to change with the code below.

var tl = new TimelineMax();
tl.to('#progress', 1, { rotation: -180 });

 

I've got this reproducable on:

- macOs Sierra 10.2.6 using Safari 11.0.2, Chrome is working fine here

- iPhone 8 & iPhone6 using Safari & Chrome

- iPad 3 using Safari & chome

 

Everything works fine in Windows and Ubuntu.

 

Hope you can help me out :)

 

Edited by Guido
Pointed out it works in Windows and Ubuntu

Share this post


Link to post
Share on other sites

Thanks for the demo. I vaguely recall something like this coming up in the past.

I'm foggy on the details, but if you use 90.5 it seems to work: 

 

.set('#progress', { rotation: -90.5, transformOrigin: 'center center', drawSVG: 0 }, 0)

 

 

I'll ask around and see if I can find a good answer or a real fix for you.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

I believe the problem is actually caused by the fact that for <circle> elements, Apple makes the origin of the stroke at a completely different spot than all the other browsers. It has nothing to do with rotation or a bug in GSAP. It's just an annoying choice Apple made. You can resolve it by converting the <circle> to a <path> so that the coordinates are explicit about where to start. MorphSVGPlugin has a super convenient method for doing this, so all you'd need to do is add this line to the top of your JS:

MorphSVGPlugin.convertToPath("#progress");

 

But I noticed you're not a Club GreenSock member, so you don't have access to MorphSVGPlugin. I ran the conversion for you and got this, which you can just swap in for your <circle> instead (thus you wouldn't need MorphSVGPlugin):

<path class="st2" id="progress" d="M589,319 C589,468.1,468.1,589,319,589,169.9,589,49,468.1,49,319,49,169.9,169.9,49,319,49,468.1,49,589,169.9,589,319z"></path>

 

Does that help?

  • Like 5

Share this post


Link to post
Share on other sites

I'd definitely echo @GreenSock's advice and convert that to a path. I've fought with many circle animations and that is the easiest approach.  (You can also convert it to a path before exporting from your vector software if you like.)

 

I started a thread last year about SVG circle fun in the various browsers. It may be of interest to you.

Happy tweening.

:)

  • Like 7

Share this post


Link to post
Share on other sites

Hey,

 

Thanks for the quick replies :)

The answers from both @Carl aswell as @GreenSock solved it!

 

@GreenSock, thanks for the clear explanation and for converting that piece of svg. Our company has an Club GreenSock account but I rather use my personal account on the forum so I will keep that plugin in mind!

 

@PointC, I 'll give it a read.

 

  • Like 2

Share this post


Link to post
Share on other sites
10 minutes ago, Guido said:

Our company has an Club GreenSock account but I rather use my personal account on the forum so I will keep that plugin in mind!

 

Excellent! Thanks so much. Glad this resolved things. Happy tweening!

Share this post


Link to post
Share on other sites

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.