tween x as %, then x as number...

[erikb]

I don't think this is a bug, but rather it is an issue which caused me to scratch my head.  If I tween x first as a percent (100%) it slides over. Then later if I tween the element's x as a number (0), the element does not slide back.  Tweening back to 0% does what I wanted to accomplish.  This small discovery might be helpful to other developers?  

See the Pen Cegjo by jedierikb (@jedierikb) on CodePen

[Diaco]

Hi erikb 

 

this is what i think about that ; GSAP tween elements with css matrix , but matrix doesn't accept the percentages values ( only num ) . with percentages , element ill animate with css transform translate .

after first tween we have this : translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0) , so with matrix logic the element x = 0 , and this mean you should tween with x:'0%' to back .

at least that's my understanding .

[GreenSock]

Excerpt from the CSSPlugin docs: 

 

If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience.

 

Remember, there are dedicated "xPercent" and "yPercent" properties which is actually a very powerful thing because you can COMBINE them with normal px-based x/y translation. 

 

So in your case, you were setting the regular x and y to percentage-based values, so the plugin thought "oh, he's setting a percent value...as a convenience we'll just funnel those values to xPercent and yPercent...", thus x and y ended up being untouched/unanimated. If you want to animate percentage-based values, use the xPercent and yPercent properties and you'll be golden. 

[Carl]

yup, as Diaco noted, when you set x as a percentage it uses a translation but if you use px it uses a matrix. 

 

To make your code work you could just specify the units as % in your second tween

var t1 = new TweenMax( '#a', 3, {
  x: '100%',
  onComplete: function( ) {
    var t2 = new TweenMax( '#a', 3, {
      x: "0%"
    });
  }
});

And yes, that can be all be a little confusing if you aren't expecting it. We have separate xPercent and yPercent properties specifically for when you want to do x and y translations as percentages. It can be very useful for instance to set an element xPercent and yPercent to -50 (for centering) and then use x and y for offsetting from center. This is explained in this post here: http://greensock.com/gsap-1-13-1 

 

Be sure to study and click through all the steps in the second demo on that page. 

 

Let us know if you need more clarification.

 

 

[cbslt]

GSAP/Jack - Could you please define what xPercent and yPercent is a percent of?  I have seen the codepens and explanations of how it works, but I'm having trouble applying it because I haven't seen a definition anywhere.  

 

For example, I see you have to set top and left first, then xPercent and yPercent work, otherwise it moves things outside the div.  Why?  Just need to know the actual definition.  Could definitely be my lack of overall CSS knowledge.  Thanks!

 

Have already looked here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

http://greensock.com/gsap-1-13-1

[cbslt]

Ah... is its xPercent of itself? 

 

Many thanks for a great tool!

[GreenSock]

Yes indeed. The CSS spec indicates percentage-based transforms are always in relation to their own native size (before transforms are applied). This can actually be very useful, especially for centering things. Let us know if you need any more help. Happy tweening!

[cbslt]

Thank you very much -

 

Can you explain the difference between y:-25 and y:"-=25"?  I noticed different behavior especially when moving multiple objects.  In the former, multiple objects moved different amounts.

 

Should I be reading the CSS spec to find out out how to use these things or is there a place in your API that explains each?  

[Diaco]

Hi cbslt 

 

y : -25  > tween from current value to -25

 

y : " -=25 " > define relative values , decrease 25 unit from current value 

 

y : " +=25 " > increase 25 unit from current value 

[erikb]

More here:

http://stackoverflow.com/a/15664831/62255

[Carl]

Should I be reading the CSS spec to find out out how to use these things or is there a place in your API that explains each?  

 

You can read about how relative values work in the Jump Start http://greensock.com/jump-start-js#relative-tweens and TweenLite docs: http://greensock.com/docs/#/HTML5/GSAP/TweenLite/

[cbslt]

Terrific, thank you