Having a hard time with default behavior of a simple transition.

[axe-z]

Hi, I figured how to do it,

 

But I Cannot understand the real logic behind it. 

 

if I ask a centered div to move X by 250px, 

then the next animation one by the same distance. 

they should end up a 500px ... with equal mouvement right ?  .. 

 

 

I've made a simple codepen. I need to understand, even things this simple !

See the Pen dOogRz by axe-z (@axe-z) on CodePen

[Carl]

Thanks for the demo.

 

Yeah, I can see how this could be a bit confusing.

 

An important thing to know is that GSAP animates x / y values using a transform matrix (for performance) so it needs to convert any percentage-based values that you use in your css to pixels. 

 

So your css values:

 

-webkit-transform:translate(-50%,-50%);
         transform:translate(-50%,-50%);

are being converted to an x of -125px behind the scenes. This means that the starting x position of you element is not 0px. This also means that tweening to x:250px (absolute) is going to be a different position than x:"+=250" (relative). 

 

 

I think it will helpful to see that when your animation first starts that the box's x position is not 0. It is a pixel value based on half its width.

 

Run this demo that tweens the box x to 0.

 

http://codepen.io/GreenSock/pen/yVNQWp?editors=0110

 

click on the center of the box and notice how when tweening to x:0 the box moves to the right based on half its width. 

This is only to illustrate the starting x value is not 0.

 

 

The chart below shows you the coordinates of your box when the animation starts.

See how the left edge of the box (x) is at -125.

The relative value of x:"+=250" actually lines up with the absolute x value of 125

 

 

Hopefully this helps explain why tweening to x:250 and x:"+=250" yielded different results.

[axe-z]

It does, but I strongly think it should not work this way... you might want to use $this.position().left to get the proper values.  $ is smarth enough to get the right start number without this offset.

 

Also a great plugin suggestion would be an svg filter one. Thanks anyway