Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jollibee

Rotation around center in Safari is different from Chrome

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

There is a group in the svg named 'p1-1_abc_1', and set transformOrigin: 'center center'.

 

It works great in Chrome, but the position of  'p1-1_abc_1' jumped in safari when the timeline start.

 

Safari: Version 10.1.1 (12603.2.4)

Chrome: Version 58.0.3029.110 (64-bit)

 

 

2017-06-14 at 4.24 PM.png

See the Pen dRpOXW by devon (@devon) on CodePen

Share this post


Link to post
Share on other sites

Hello @jollibee and Welcome to the GreenSock Forum!

 

Sorry tyour having an issue! I tested in Windows 10. And I am seeing this same behavior in Firefox 53.0.2 and in latest Firefox 54. But i do not see this in Chrome. I dont have Safari with me to test.

 

Please standby while we look into this. :)

Share this post


Link to post
Share on other sites

I can help you to test safari. Let me know if there is anything I can do. Thank you.

Share this post


Link to post
Share on other sites

Safari is very buggy when it comes to SVG, Both Firefox and Safari were not calculating the position correctly like chrome. The hardcoded transform wont give you true cross browser.

 

So its best to allow GSAP to set the initial rotation for you cross browser ;)

 

It looks like this is happening due to the transform attribute you already have on your #p1-1_abc_1 <g> tag.

 

<g id="p1-1_abc_1" transform="rotate(-4 2184.423 -255.57)">

 

If you remove that transform attribute

 

<g id="p1-1_abc_1"><!-- transform="rotate(-4 2184.423 -255.57)" -->

 

And set the x and y for #p1-1_abc_1 before your to() tweens you will see it animate correctly.

 

TweenMax.set("#p1-1_abc_1", {x:25.1847,y: 136.027});

 

See the Pen bRwRme by jonathan (@jonathan) on CodePen

 

Does that help? :)

  • Like 5

Share this post


Link to post
Share on other sites

It works on Safari. So we can write some code to analyze the transform on group and set use TweenMax.

 

Thank you.

  • Like 2

Share this post


Link to post
Share on other sites

No worries 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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×