Jump to content
Search Community

Possible bug with rotation on SVG safari

martis 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

Hey guys,

 

Working on some SVG animation and noticed that rotation was not working properly on Safari (osX and iOS).

 

Check the pen in chrome and firefox (the circle is rotated correctly and starts at the top).

 

If you check the pen in safari the rotation does not happen and it starts at the 3 o'clock position.

 

Thanks

See the Pen WjRopx by anon (@anon) on CodePen

Link to comment
Share on other sites

That's actually not a bug in GSAP - it simply has to do with where Safari chooses to start drawing the stroke on a circle. Annoying, I know - for some reason, Safari decided it's best to start drawing it there (at 3 o'clock). So even if you completely remove GSAP from the equation and do a stroke-dashoffset via CSS or whatever, you'll see the same thing. 

 

To resolve that, your options are:

  1. Just rotate the <circle> in Safari. Not ideal because it requires browser detection.
  2. Use a <path> instead of a <circle>. To do this you have the following options:
    • Create it manually in a drawing program like Illustrator
    • Write the <path> data string yourself (or maybe there's a tool online that'll do it for you). 
    • [EASIEST:] Just use MorphSVGPlugin's convertToPath() method as demonstrated in this fork: http://codepen.io/anon/pen/pPRNqd?editors=0010 (notice I just added one line of code at the top, and of course loaded MorphSVGPlugin). Note: MorphSVGPlugin is a membership benefit of Club GreenSock. https://greensock.com/club/ 

Does that help? 

  • Like 4
Link to comment
Share on other sites

I've created a lot of animations with circles where I wanted the drawing to start at 12:00 o'clock and I've found the easiest way is to set the transform right when I create the circle. So, in your case:

 <circle id="svg-circle" fill="none" stroke="#EB2222" stroke-width="13" transform="rotate(-90 200 200)" stroke-miterlimit="10" cx="200" cy="200" r="72"/> 

That seems to deal with most of the browser fussiness issues for circle drawing type effects that start at 12:00 o'clock.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

GSAP could do it, but you would have to use the GSAP AttrPlugin so GSAP knows its an attribute, since by default the CSSPlugin is used.

 

But that is not a GSAP bug but a browser bug in Safari regarding the rotation origin bug. But Jack and Craig (PointC) pretty much covered all the various ways to fix this:)

  • Like 1
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.
×
×
  • Create New...