Jump to content


rotation: '+=-45' doesn't work

Go to solution Solved by Diaco,

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


rotation, rotationX, rotationY, skewX, skewY attributes aren't working when I use negative number after '+='

please check the attached pen.

There is no problem when I use x, y, or scale parameters.

Are you planing to add '*=' and '/=' support? I think it would be great for scale attribute...

See the Pen QwvZKK by XPoli (@XPoli) on CodePen

Link to comment
Share on other sites

Hi XPoli  :)


what you mean with '+=-45' !?.... pls use  ' +=45 '  or ' -=45 '

Link to comment
Share on other sites

Hi Diaco.AW,

I just tried to use this '+=' feature with a variable like {rotation: '+=' + number} in this case negativ numbers are not working.

(I use '+=' because I don't know the current rotation value in my project)

I created the pen only for demonstrating the issue, I know that I can use '-=45'

This feature works with x, y and scale attributes, so I think it should work with others too...

Link to comment
Share on other sites

  • Solution

Hmm , something simple like this can help you :


TweenMax.to('#d1', 1, {repeat: -1, yoyo: true, rotation: N(-45) });
TweenMax.to('#d2', 1, {repeat: -1, yoyo: true, x: N(100) });

function N(n){
num = n > 0 ? '+='+Math.abs(n) : '-='+Math.abs(n) ;
return num
  • Like 1
Link to comment
Share on other sites

Thanks :)

I hope it will be fixed later...

Link to comment
Share on other sites

Yes, Diaco's solution is great for now. 


the "+=" and "-=" operators have very specific intentions and were created as a convenience when you know that you want a value to increase or decrease in a positive or negative fashion. 


Frankly, I find it more strange that "+=-100" was working for x than that it wasn't working for rotation. I would never recommend that type of usage. 

Once GSAP detects a string with "+=", I believe the parsing algorithm simply EXPECTS the following part of the string to be a number, and not another + or -.

I'm not exactly sure what happens when those characters are encountered.


In addition, it might be nice, or expected that the following worked

var value = -45 // negative
TweenLite.to(element, 1, {rotation:"+=" + value});

In summary, please use Diaco's technique to detect pos or neg values before using the += and -= relative modifiers.

Your tests certainly revealed different behavior for different properties (thank you).

We will investigate this further and get back to you with either a fix, or more formal explanation of what is happening (I don't write the code)

  • Like 3
Link to comment
Share on other sites

Thanks for reporting this, XPoli. Sorry about the hassle - this will be fixed in 1.15.1. You can test the uncompressed preview of TweenMax 1.15.1 at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.jswhich seems to work great in your codepen demo (thanks for providing that, by the way). 

  • Like 3
Link to comment
Share on other sites

I'm glad I could help :)

I love your works, great job!!

Link to comment
Share on other sites

Are you planing to add '*=' and '/=' relative modifiers?

I think it would be useful for changing scale, like 2x bigger is just '*=2'

Link to comment
Share on other sites

Nah, I doubt it - I think you're the first person to ever request it in all the years we've been doing this, and it would be non-trivial to add support for those because it would affect every plugin and every place where any value is parsed. Frankly, I don't see much value in it anyway, as you can get the results you want already for the most part. In your example, scale is scalar anyway, so if you want something twice as big, wouldn't you just do scale:2? Or scale:element._gsTransform.scale * 2. 


If enough people request it and it proves worth of the extra kb and performance-hit from parsing, we'll certainly reconsider it. For now, though, there aren't any plans to add support for *= or /=

  • Like 1
Link to comment
Share on other sites

Ok, I undestand I'm also using {scale:element._gsTransform.scale * 2}

Thanks for the answer!

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.