Jump to content


Back to back directional rotation

Go to solution Solved by swampthang,

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

I'm attempting to run 2 directionalRotation tweens back to back - first clockwise and then counterclockwise. My app requires that I be able to do this in 2 separate timelines which are added to a main timeline. I made the codepen short and sweet.


I've tried this as 2 separate tweens in a single timeline and it has the same behavior as 2 timelines in a main timeline - it does the first timeline/tween and doesn't do the 2nd one. I just discovered this issue in my app and am supposed to release this tomorrow. Yikes. Can anyone tell me what's up?


I'm using a callback to clearProps like:


but tried directionalRotation as the property to clear as well. As usual, I'm sure I'm doing something wrong. Thanks in advance for the help.

See the Pen QKwRNQ by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Hey swampthang :)


Isn't this a scope issue? You're declaring your gp variable inside your doRotate() function, but trying to access it in your clearVars() function. I think making gp a global variable should make things work correctly for you.


Hopefully that helps.


Happy tweening.


  • Like 1
Link to comment
Share on other sites

Yea, you're right, PointC. Doh! I had it as a global and changed a few things around and forgot it wasn't up there anymore. I did move it and got the rotations to play back to back but should all the transforms be clearing? If you look at the Codepen now, you'll see that it jumps to the left when it clears the rotational property. Shouldn't the specific property be cleared and nothing else? In my app, the item gets placed onto the center of the stage using a Tween.set. Or does it nuke the whole thing?

Link to comment
Share on other sites

  • Solution

I decided to use the _gsTransform.rotation = 0 approach. Doesn't nuke the positioning of the SVG. I updated the pen in case anyone needs help with this too. It's in the clearVars function on line 22.

Link to comment
Share on other sites

Just to clarify something, when you use the DirectionalRotationPlugin the property you are setting is still rotation. In other words there isn't a directionalRotation property that can be cleared... just rotation.


Also, CSSPlugin has all the capabilities of DirectionalRotationPlugin so there is no need to use directionalRotation:"360_cw"


Consider the following:


TweenLite.to(".box", 1, {directionalRotation:"295_ccw", onComplete:reset})
//same as
//TweenLite.to(".box", 1, {rotation:"295_ccw", onComplete:reset});
function reset() {
  TweenLite.set(".box", {clearProps:"rotation"})




Hope that clears some things up.

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