Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
axe-z

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

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

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:

 

-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

 

090a047dc1d34802ad4e733be0df171c.png

 

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

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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×