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

[XPoli 0 Likes (Newbie)]

Hi,

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

[Diaco 1,948 Likes (Superhero)]

Hi XPoli 

 

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

[XPoli 0 Likes (Newbie)]

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

[Diaco 1,948 Likes (Superhero)]

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
} 

[XPoli 0 Likes (Newbie)]

Thanks

I hope it will be fixed later...

[Carl 9,066 Likes (Superhero)]

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)

[GreenSock 8,117 Likes (Superhero)]

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

[XPoli 0 Likes (Newbie)]

I'm glad I could help

I love your works, great job!!

[XPoli 0 Likes (Newbie)]

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

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

[GreenSock 8,117 Likes (Superhero)]

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 /=

[XPoli 0 Likes (Newbie)]

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

Thanks for the answer!