Jump to content

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

Recommended Posts

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

  • Like 1

Share this post

Link to post
Share on other sites

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:



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.




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.

  • Like 2

Share this post

Link to post
Share on other sites

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 :) 

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.