Jump to content
Search Community

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

XPoli test
Moderator Tag

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

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

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

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

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

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.
×
×
  • Create New...