rotation by degrees - counterclockwise not functioning as expected

[Haikukitty]

Hi there:

 

I think I'm doing something wrong in CodePen, since my example is not functioning - but the code I'm using is in there.

 

Here's a link to view what I've got going on:

http://bluetabby.com/rr/index17.html

 

I want the pie wheel to spin on load (preferably a random multiple of 72 degrees between 5 and 10 but I haven't gotten that far yet) and then advance by 72 degrees clockwise with right arrow click, and reverse counterclockwise by 72 degrees on left arrow click.

 

Everything is more or less working except that my counterclockwise reverse rotation seems to be going about 216 degrees and not 72. I basically need the pie to advance one slice in each direction depending on which arrow you click.

 

Anyone know what I'm doing wrong?

 

FYI - just discovered Greensock tonight - and so far its amazing! But I'm still struggling to understand some of the functionality and syntax.

 

Thanks!!

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

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Thanks for the reduced sample, it was very helpful.

 

When you work with the directional rotation plugin, use directionalRotation in the config object:

TweenMax.to('#wheel', 1, {directionalRotation:"-=72_ccw"});

Finally it seems that there was a small issue in the previous version (1.14.2) that created that odd behaviour, that seems to be corrected in the newest version (1.15.0). Please point to that version, since it seems that CDNJS hasn't updated the files for the "latest" folder:

 

//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js

 

With that version and this code it seems to work:

$("#rightarrow").on('click', function(){

  TweenMax.to('#wheel', 1, {directionalRotation:"+=72_cw"});

});
$("#leftarrow").on('click', function(){

  TweenMax.to('#wheel', 1, {directionalRotation:"-=72_ccw"});

});

I forgot to mention that the directional rotation plugin will force the element to rotate in one direction, regardless of the relative values, that's why the code I posted uses different rotation direction and relative values. You can get the same effect using the "short" suffix in the config object, like this:

$("#rightarrow").on('click', function(){

  TweenMax.to('#wheel', 1, {directionalRotation:"+=72_short"});

});
$("#leftarrow").on('click', function(){

  TweenMax.to('#wheel', 1, {directionalRotation:"-=72_short"});

});

I believe that me saying that there was an issue with the code is not quite accurate, so please disregard that part.

 

Rodrigo.

[Haikukitty]

Thank you!! You are a lifesaver!

[GreenSock]

[i typed this before Rodrigo answered...]

 

You had some typos in your code (extra "})" in some spots), but I also noticed a slight flaw in the logic that I'd recommend fixing. If you use relative tweens, imagine what will happen if someone clicks many times quickly. Some of their clicks might happen WHILE the animation is in-progress. For example, if it's animating from 0 to 90 and the user hits the arrow when it's at 47 degrees, and you use "+=90", it'd end up at 137 whereas you probably meant for it to end at 180. See what I mean? It's not a problem with GSAP at all - it's just a logic issue. 

 

So I think this is more like what you're after:

http://codepen.io/GreenSock/pen/979194fa5eebd939a58846c77e5b70bd/?editors=101

 

Notice that I use a variable to track the end/target rotation so that it's always clean and I can += or -= to that. It will never get tainted if the user clicks a bunch of times. 

 

Oh, and you were linking to version 1.14.2 of GSAP which happen to have a minor regression that caused negative relative rotational values to be interpreted as positive, but that has since been fixed in 1.15.0. 

 

I hope you're enjoying GSAP! The more you dig in, the more I think you'll like it. Happy tweening!