Jump to content
iwato

GreenSock AP - Parameter Specification

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...