Jump to content

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

Safari 10 issue with rotate SVG circle

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

Hi there,


While trying to animation multiple SVG circle I found that interesting bug where if I rotate one of my circle (circle2) to the value -90 it seems to go back at to rotate back to 0deg at the end of my animation.


Fun fact, if you replace the value -90deg by -90.06deg it doesn't seems to bug, I would guess there is some rounding involve, it jumps to -91deg.


This bug seems to occur only on Safari 10.0.1

Even if I found a temporary fix for my problem I'm still curious on what could be done differently to avoid that bug 


See the Pen eBMqwJ by suparjam (@suparjam) on CodePen

Link to comment
Share on other sites

Hello Quentin and Welcome to the GreenSock Forum!


There are a couple of things you can try.

  • To stop rounding of your rotation values you can add autoRound:false to the tweens you want with rotation
  • you should use rotation and not rotationZ. Technically they are the same thing, but SVG does not support 3D transforms, so it does not support rotateZ.
  • You can take advantage of the various rotation value syntax of "_cw" clockwise, "_ccw" counter-clockwise, or "_short" shortest direction suffix. See below:

Found in the CSSPlugin docs: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin



  • Tweens rotation in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example, if the element's rotation is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use the _short suffix, it would travel 20 degrees in the clockwise direction instead.


TweenLite.to(element, 2, {rotation:"-170_short"});

//or even use it on 3D rotations and use relative prefixes:
TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"});
  • Notice that the value is in quotes, thus a string with a particular suffix indicating the direction (_cw, _ccw, or _short). You can also use the "+=" or "-=" prefix to indicate relative values. Directional rotation suffixes are supported in all rotational properties (rotation, rotationX, and rotationY); you don't need to use directionalRotation as the property name. There is a DirectionalRotationPlugin that you can use to animate objects that aren't DOM elements, but there's no need to load that plugin if you're just animating css-related properties with CSSPlugin because it has DirectionalRotationPlugin's capabilities baked-in.

Check out an 

See the Pen jiEyG by GreenSock (@GreenSock) on CodePen


Prior to version 1.9.0, directionalRotation was called shortRotation and it only handled going in the shortest direction. The new directionalRotation functionality is much more flexible and easy to use (just slap a suffix on the regular property).


Hope this clarifies things! :)

  • Like 3
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.