Safari 10 issue with rotate SVG circle

[Quentin]

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

[Jonathan]

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

 

directionalRotation

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

Example:

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!