Jump to content
Search Community

Unable to Rotate <circle> in Safari (MacOS + iOS)

thejamespower test
Moderator Tag

Go to solution Solved by Jonathan,

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,

 

I'm trying to get a simple DrawSVG animation working. DrawSVG works amazing as per.. however I'd like the animation to start from 12 o'clock rather than the standard 3 o'clock start point for SVG circles. For some reason neither iOS or desktop Safari honour the rotation. Any ideas? Reduced CodePen is attached.

See the Pen VPJqPW by thejamespower (@thejamespower) on CodePen

Link to comment
Share on other sites

  • Solution

Hello thejamespower and Welcome to the GreenSock Forum!

 

Sorry your having an issue.

  • What version of MacOS?
  • What version of Safari?

Basically GSAP adds the rotation via transform attribute if you inspect the SVG with the browser inspector, even though the rotation property would imply using the CSSPlugin. Normally you will see that GSAP is setting matrix() on the transform attribute of the <circle> .. i.e. .. transform="matrix(0,-1,1,0,0,200)"

 

Just to test and see... try and hard code and test the below:

 

Does it still not work if you add the transform rotate() directly on a group element <g> or the <circle> element?

// if you hard-code and add directly to <circle> element to see if Safari is ignoring GSAP rotation
<circle cx="100" cy="100" r="80" transform="rotate(-90 100 100)" />

// if you hard-code and add directly to <g> element to see if Safari is ignoring GSAP rotation
<g id="circle-parent" transform="rotate(-90 100 100)">
    <circle cx="100" cy="100" r="80"/>
</g>

transform rotate hard-coded on the <g> element:

 

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

 

or transform rotate on the <g> element set() via GSAP:

 

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

 

or set transform attribute directly on the <circle> element via GSAP AttrPlugin

 

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

TweenMax.set('circle', {
  drawSVG: 0,
  attr: {
     transform: 'rotate(-90 100 100)'
  },
  transformOrigin: 'center'
});

x

If you cant see the -90deg rotation in any of my codepens on MacOS and Safari .. please reply back so we can have the Grandmasters Jack and Carl look into this.

 

Resources:

GSAP AttrPluin: https://greensock.com/docs/#/HTML5/GSAP/Plugins/AttrPlugin/

 

:)

  • Like 4
Link to comment
Share on other sites

If I understood your question correctly, this issue actually has to do with how Safari decides to render circles. You see, the line must start somewhere and pretty much every other browser starts it at the 3 O'Clock position whereas Safari doesn't. Think of it like when you draw a circle with a pen, you'd put your pen down somewhere and draw the circle all the way around, but you could start at the top, left, right, bottom, or anywhere really. I don't think the spec actually dictates anything in particular so it's just kind of an oddity in how Safari works with <circle> elements. One solution would be to convert the <circle> to a <path> so that it's not up to the browser to decide where it should start. You could use a tool like Illustrator to do that conversion or MorphSVGPlugin.convertToPath(). 

 

Does that clear things up?

  • Like 2
Link to comment
Share on other sites

Thanks all! Yes, Safari seems to go its own way with most things, spec' or no spec'. 

 

From Jonathan's brilliant reply,  hardcoding the transformation on the <g> parent or using GSAP to set it with the AttrPlugin appears to work in both Safari's on MacOS and iOS.

 

Thanks again for the help and as always, brilliant support  :ugeek:

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

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...