GreenSock AP - Parameter Specification

[iwato]

BACKGROUND:  I have recently discovered GreenSock AP that is an interesting blend of Javascript and CSS for the purpose of producing animation.  Like all new such discoveries I spend a lot of time exploring before I begin coding, and as a result learn a lot of new code and make more robust what I already know.  In particular, I am curious about the value of the y parameter in the following .from() tween specification.

TweenLite.from($box, 1, {y: '-=40', autoAlpha: 0, ease:Power4.easeInOut});

Now, $box refers to a jQuery object where $box = $('#box') and #box refers to a div whose id attribute has been set to box.

QUESTIONS:

1) In the absence of the tween could the expression y: '-=40' be rewritten as box.y = '-=40';

box.y = '-=40';

2) When the tween is invoked there is a downward vertical displacement of the object.  The statement appears to set the starting position of the tween 40 pixels higher than its final position.  In discursive English what exactly does the expression '-=40' say?  I am baffled by the -= syntax.

Roddy

[justsomeguy]

In the absence of the tween could the expression y: '-=40' be rewritten as box.y = '-=40';

If you have an existing object that you're trying to set a property for, yes that's how you set it.

In discursive English what exactly does the expression '-=40' say?

I don't have a word for that, but it's a decrement operation.  Not necessarily in this case though, because it's just a string of text.  The string of text only has whatever meaning their code gives to it.  Maybe that's given as a value to the built-in CSS animation properties though.

Operators like +=, -=, *=, /= etc are all used.  It's just shorthand.  These are equivalent:

x = x + 1

x += 1

Those kinds of operations are used so frequently that it was decided to make a shortcut operator for it, like was done for ++ or --.