Jump to content


SVG Rotation bug(?) - Apple specific

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



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


See the Pen goMWOp by exploretheworld (@exploretheworld) on CodePen

Edited by Guido
Pointed out it works in Windows and Ubuntu
Link to comment
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)


See the Pen ZvJyvp?editors=0010 by GreenSock (@GreenSock) on CodePen


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



  • Like 2
Link to comment
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:



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
Link to comment
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
Link to comment
Share on other sites



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
Link to comment
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!

Link to comment
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.