.set() with xPercent doesn't work

[marlonmarcello]

Using .set() with the percentage equivalent of x and y doesn't work

See the Pen vGeZbj by marlonmarcello (@marlonmarcello) on CodePen

[PointC]

Hi marlonmarcello 

 

Welcome to the forums.

 

I'm not 100% sure what you mean, but everything looks like it's working fine to me. Are you thinking that xPercent is referring to the screen width/position? When using xPercent and yPercent, you're referring to the element itself not the window width/height. In your example, the box is 50px wide so moving it xPercent:-100 is moving it 50px. You'd want to use x/yPercent to center your element and then regular x and y transforms to position that element where you want it.

 

Please take a look at this blog post which has a lot of details and some great examples of xPercent and yPercent:

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

 

Hopefuly that helps a bit.

 

Happy tweening and welcome aboard.

[Carl]

Thanks for the demo. Craig is exactly right, it appears to be working as designed. 

Perhaps this will help you visualize what xPercent:-100 is doing: http://codepen.io/GreenSock/pen/mPBqZG