Latest Version of GS has broken my animation

[Heelaque]

Hi there guys,

 

Yesterday I returned to my work to find that my design wasn't working and I eventually discovered that if I simply use version 1.14.1 that my design works again.

 

From the change in performance I think that the code below is somehow now longer supported in the way it used to - but can someone explain what I need to do, to get it working in the newest version please:

 

if (condition 'A')

TweenMax.to(obj, 20, {rotation:"-=360", repeat:-1, ease:Linear.easeNone});

else if (condition 'B')

TweenMax.to(obj, 20, {rotation:"+=360", repeat:-1, ease:Linear.easeNone});

 

I'm rotating an "obj" to make a continuous loop every 20 seconds - its supposed to be that simple but the newest version of GS will only rotate the "obj" in one direction and not he other.

 

I can work on a codepen example if needed, I'm just hoping that there is an obvious solution...

[Jonathan]

Hello Heelaque, and Welcome to the GreenSock Forum!

 

Here is an example with your code working:

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

:

It is using TweenMax 1.14.1

 

The latest version at the time of this writing is 1.14.2:
:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>

:

Does that help?

[Heelaque]

Hi Jonathan,

 

Before starting this topic I was able to get me code working with '1.14.1' and I did find out that '1.14.2' now breaks my code.

 

My question was more about what happened to '1.14.2' that broke my code... because if I wanted to continue to develop with GS then I would like to know that I could benefit from new improvements in newer versions. I couldn't do that if I'm stuck using '1.14'1' because my design can no longer run on newer versions of GS as they come out.

 

I figured that since the code I provided was so basic in scope, that either:

 

1) - '1.14.2' needs to be patched to repair a bug that has stopped my code from working.

- or -

2) - My code no longer works with '1.14.2' because there is now something 'better' in the newer version of GS that replaces the functionality that my code once relied upon in the older version.

 

If the problem is "a" then what part of my code is now 'buggy'? And if the problem id "b" then what is the new way of doing things in '1.14.2' that will make my code work again?

 

I'm just looking for a little guidance so I can continue to learn the GS library.

[Jonathan]

Thank you Heelaque, for the brief explanation. I saw you updated your answer.

 

I just had some more questions regarding what you wrote above.. When you say your code no longer works with 1.14.2

• Do you have a code example of your code broken using 1.4.2  ?
• And also what is the expected behavior that you previously had ?
• And what is the behavior you are seeing with 1.4.2 ?
• Have you tried adding "_cw" for clockwise rotation or "_ccw" for counter clockwise rotation?  i.e .. "=+360_cw"

GSAP uses the CSSPlugin to animate CSS properties. Have you looked at directionalRotation

 

The below is taken from the CSSPlugin Docs:

 

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.

 

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

 

If you can provide a limited codepen example we can see your code in context to better help you and see what you are seeing in your code!

 

Here is a nice codepen video by GreenSock on How to create a codepen demo example.

 

Let us know if this helps or if you are still having issues.. Thanks Heelaque!

[Heelaque]

Hi Jonathan and thank you for fixing this problem for me:

 

I didn't know about the "_cw" or "_ccw" suffixes that exist in GS and their addition to my code has apparently fixed the problem.

 

For clarification, my previous code did not have these suffixes and still worked by rotating in both directions (it didn't work with '1.14.2' because it only rotated in a clockwise direction after that). With the release of the latest version of GS it seems that there is now more emphasis on using "_cw" & "_ccw".

 

Thanks again mate, it's great to have you around.

[GreenSock]

This was indeed a regression in 1.14.2 related to negative relative rotations (it had to do with a fix applied to a regular expression internally that caused the negative sign to get lost in this particular case). Sorry about that. It'll be fixed in 1.14.3. I have attached a preview of that in case you want to test it. 

TweenMax_1.14.3_preview2.zip