Search In
• More options...
Find results that contain...
Find results in...

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

## Recommended Posts

Hi,

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

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

##### Share on other sites

Hi XPoli

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

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

##### Share on other sites

```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
} ```
• 1
##### Share on other sites

Thanks

I hope it will be fixed later...

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

• 3
##### 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).

• 3
##### Share on other sites

I love your works, great job!!

##### 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'

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

• 1
##### Share on other sites

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