Jump to content
Search Community

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

axe-z test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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
Link to comment
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
Link to comment
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 :) 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...